Laravelデバッグメソッド・ツールまとめ&小ネタ集

こんにちは。SCOUTERでエンジニアインターンをしている池谷と言います。
バックもフロントも書いてます。

SCOUTERでは、サーバーサイドはPHPを使って開発していますが、特にLaravelをフレームワークとして採用することが多いです。 Laravel、いいですよね。コレクションは便利だし、ORMもシンプルで使いやすいです。
今回はLaravelのデバッグ方法まとめと、ちょっとした小ネタを紹介しようと思います。

ロギング

ログ出力しないとデバッグは始まりませんね。 Laravelでは便利なlogger(), info()といったヘルパーメソッドが用意されてます。 デフォルトでは、storage/logs/laravel.logに出力されます。

logger("サーバーサイドエンジニア募集中");
info(['フロントエンドも募集中', '募集中']);
[2017-06-30 13:40:35] local.DEBUG: サーバーサイドエンジニア募集中
[2017-06-30 13:41:30] local.INFO: array (
  'フロントエンドも募集中',
  '募集中'
)  

募集中ということがよく伝わるロギングができました。
これ、Logファサードをグローバルヘルパにしただけなので、もちろんファサードを使っても実現できます。

\Log::debug("エンジニア募集中");
[2017-06-30 13:45:21] local.DEBUG: エンジニア募集中

ちなみに、そのままだとオブジェクトは出力不可能です。でも出力したいんだぜという人はprint_rを組み合わせるといい感じに出力されます。
PHP職人の方にはよく知られた方法ですね。

logger(print_r($object, true));

ロギングではないですがヘルパ関数でいうとdump and dieもよく使います。
変数だろうがオブジェクトだろうが、スクリプトを停止した上で、綺麗にブラウザ等に出力してくれます。

dd($request);

デバッグツール

Laravelには便利なデバッグツールが用意されてます。

laravel-debugbar

Laravelデバッグにおける神ツール。知らない人は是非インストールしておきましょう。
具体的なインストール・設定方法はSCOUTER社の別のエンジニアが個人ブログで紹介しているのでそちらをご覧ください笑

larapet.hinaloe.net

f:id:yoshiki-ikegaya:20170704120512p:plain こんな感じのデバッグバーがブラウザの画面下に出てきます。 使ったRouteやクエリやAuth、laravel.logの表示までやってくれます。tailとはなんだったのか。

tinker

f:id:yoshiki-ikegaya:20170704125131p:plain
tinkerとは、Laravel専用のREPLツールです。対話型実行環境というやつです。 psyshというPHPでよく使われるREPLツールをラップして作られています。 railsrails cにあたります。モデルとかの検証に便利ですね。

$ php artisan tinker

Psy Shell v0.8.1 (PHP 7.0.19 — cli) by Justin Hileman
New version is available (current: v0.8.1, latest: v0.8.8)
>>>
>>>
>>>
>>> App\Models\User::all()
=> Illuminate\Database\Eloquent\Collection {#752
     all: [
       App\Models\User {#753
         id: 1,
         name: "Test User",
         created_at: "2017-02-12 13:00:28",
         updated_at: "2017-02-12 13:00:28",
       },
       App\Models\User {#754
         id: 2,
         name: "Yoshiki Ikegaya",
         created_at: "2017-07-03 23:34:25",
         updated_at: "2017-07-03 23:38:09",
       },
     ],
   }
>>>

はい。

実は意外と知られていませんが、tinkerはブレークポイントを使ったデバッグに対応してます。
ソースコード内でブレークポイントを置いておけば、そのタイミングでスクリプトが自動で停止し、tinkerが起動してそこから対話型でデバッグできるというものです。
Railsの開発経験のある方は、binding.pryを使ったことがあると思います。あれです。

適当なcontrollerを作って、

eval(\Psy\sh());

というブレークポイントを設置し、
?message=laravelというクエリをつけてアクセスしてみると…

$ php artisan serve
Laravel development server started on http://127.0.0.1:8000/

Psy Shell v0.8.1 (PHP 7.0.19 — cli-server) by Justin Hileman
PHP 7.0.19 Development Server started at Tue Jul  4 11:36:53 2017
Listening on http://127.0.0.1:8000
Document root is /Users/ikegaya/develop/mercury/public
Press Ctrl-C to quit.
>>>
>>>
>>> whereami
    30|      *
    31|      * @return \Illuminate\Http\Response
    32|      */
    33|     public function index(Request $request)
    34|     {
  > 35|         eval(\Psy\sh());
>>>
>>>
>>> $request->message
=> "laravel"

はい。php artisan serveが途中で止まり、tinkerが起動しています。
そこまでで定義した変数とかも自由に使えることがわかります。

実はこれはtinkerのラップ元のpsyshの機能として動いています。
psyshの機能はtinkerでももちろん使うことができるのですが、それを知らずに単なる対話ツールとして使う人が多いようです。
他にもいろんな機能があるので、是非チェックしてみてください。

http://psysh.org/

ビルトインサーバ使用時にしかこのデバッグはできないようなのでご注意ください…

まとめ

Laravel上でできるデバッグツールや小ネタを紹介してみました。

もしまだ試していないTipsなどがございましたら是非試してみてください。 よきLaravelデバッグライフを!

さいごに

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。

興味のある方、ご応募お待ちしております!

www.wantedly.com

www.wantedly.com

Laravel+docker-compose+docker-syncで開発環境の構築

はじめに

株式会社SCOUTERの小平(id:ryotakodaira) です。

普段はバックエンドをメインでたまにフロントエンドの開発も行っています。

弊社では以前まで統一された開発環境がなくメンバーに自前で環境を用意してもらっていたのですが、新しいメンバーがジョインしてくれた時に環境構築にかなりの時間を必要としてしまうことからDockerを用いて環境構築を出来るようにしました。

Laravelでは公式でHomesteadというVagrant用の開発環境が用意されていますが、今回はLaradockというDockerで開発環境を構築できるDockerImageを使用します。 github.com

検証実施環境

  • macOS Sierra (10.12.1)
  • Docker for mac (Version 17.06.0-ce-mac18)
  • docker-compose (version 1.14.0)
  • docker-sync (0.4.6)

※Docker for mac, docker-composeのインストールは出来ている前提とします。

Laradockの準備

検証用ディレクトリを作成してLaradockをクローンします。

$ mkdir sampleApp
$ cd sampleApp 

$ git clone https://github.com/laradock/laradock.git

# Laravelのインストール
$ composer create-project laravel/laravel laravelApp

完了すると sampleApp/ 以下に laradock laravelApp が作成されています。

docker-compose の設定

laradock/docker-compose.yml を開きます。 volumesに先程作成したLaravel(../sampleApp/laravelApp)を指定します。

version: '2'

 services:

 ### Applications Code Container #############################

     applications:
       image: tianon/true
       volumes:
         - ../laravelApp:/var/www

nginx の設定

今回はnginx を使用します。Laradockにはapache用のImageも用意されているため、apacheを使いたい場合には簡単に切り替えることが出来ます。 sampleApp/laradock/nginx/sites/default.conf を編集します。

server {

     listen 80 default_server;
     listen [::]:80 default_server ipv6only=on;
 
+     server_name laravel-app.dev;
-     server_name localhost;
     root /var/www/public;
     index index.php index.html index.htm;
 
     location / {
          try_files $uri $uri/ /index.php$is_args$args;
     }
 
     location ~ \.php$ {
         try_files $uri /index.php =404;
         fastcgi_pass php-upstream;
         fastcgi_index index.php;
         fastcgi_buffers 16 16k;
         fastcgi_buffer_size 32k;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
         include fastcgi_params;
     }
 
     location ~ /\.ht {
         deny all;
     }
 
     location /.well-known/acme-challenge/ {
         root /var/www/letsencrypt/;
         log_not_found off;
     }
 }

macのhostsファイルに laravel-app.dev を追加します。 /etc/hosts を編集します。

127.0.0.1 laravel-app.dev

これで初期設定は完了です。次はDockerコンテナを立ち上げます。

Dockerコンテナの立ち上げ

laradockディレクトリに移動して env ファイルを作成します。

$ cd laradock
$ cp env-example .env

Dockerコンテナを立ち上げます。 laradockには様々はサービスのImageが用意されていますが、今回は nginxmysql を使用します。

$ docker-compose up -d nginx mysql

Dockerコンテナの稼働を確認するには以下のコマンドを実行することでどのコンテナが稼働しているかを一覧で確認することが出来ます。

$ docker-compose ps
         Name                       Command             State                     Ports                   
---------------------------------------------------------------------------------------------------------
laradock_applications_1   /true                         Exit 0                                            
laradock_mysql_1          docker-entrypoint.sh mysqld   Up       0.0.0.0:3306->3306/tcp 
laradock_nginx_1          nginx                         Up       0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp 
laradock_php-fpm_1        php-fpm                       Up       9000/tcp                                 
laradock_workspace_1      /sbin/my_init                 Up       0.0.0.0:2222->22/tcp 

http://laravel-app.dev にアクセスしておなじみのこのページが表示されていれば成功です。 f:id:ryotakodaira:20170703070709p:plain

docker-syncについて

ここまででLaravelアプリケーションをDocker上で稼働させ、開発を行うための環境が整いました。

ただ、Docker for macには ホスト⇔ゲスト間 のファイルの転送速度が遅いという問題を抱えています。

laradockの公式ドキュメントでも言及されいます。

Docker on the Mac is slow, at the time of writing. Especially for larger projects, this can be a problem. The problem is older than March 2016 - as it’s a such a long-running issue, we’re including it in the docs here.

そこで上記の問題を解決するために docker-sync というファイル転送が遅い問題を解決してくるツールを使用します。 github.com

docker-sync のインストー

さっそく docker-sync をインストールします。

※インストールには gem, brew コマンドが必要になります。

$ sudo gem install docker-sync
$ brew install fswatch
$ brew install unison

以下が表示されたらインストールは完了です。

$ docker-sync -v
0.4.6

docker-sync の設定

docker-compose.yml と同じ場所に docker-sync.yml というファイルを作成します。

 version: '2'
 
 sync_default: &sync_default
     notify_terminal: true

     # IPの設定
     sync_host_ip: '127.0.0.1'

     # ポートの設定
     sync_host_port: 10871

     # 同期させないファイルまたはディレクトリ
     sync_excludes: ['.gitignore', '.git/', '.idea/']
     
     # 同期方法の選択する (`rsync`か`unison`を使えます)
     sync_strategy: 'unison'
     
     sync_userid: '1000'
     
     # fswatchで監視させないファイルまたはディレクトリ
     watch_excludes: ['.gitignore', '.git/', '.idea/', 'vendor/', 'node_modules/', 'storage/']
     
     watch_args: '-v'
     
     watch_strategy: 'fswatch'
     
     
 syncs:
     # docker-syncのvolume名
     laravel-app:
         <<: *sync_default
         # ホスト側(PC)のパス
         src: '../laravelApp/'

docker-sync を使用するために docker-compose.yml を修正します。

services:
 
 ### Applications Code Container #############################
 
     applications:
         image: tianon/true
         volumes:
+             - laravel-app:/var/www/:rw
-             - ../laravelApp:/var/www


volumes:
+     laravel-app: #docker-sync.ymlで設定したvolume名
+         external: true

docker-sync を起動します。

$ docker-sync start
 success  Unison server started
          ok  Starting unison for sync laravel-app
          ok  Synced /path/to/laravelApp/

これで docker-sync がファイル変更を検知して変更をコンテナに同期してくれます。

監視するファイル数が多いと同期に時間がかかってしまうので、最低でも /vendor /node_modules は監視の対象から除くことをオススメしますw

docker-sync のコマンド

# syncの開始
$ docker-sync start

# syncの終了
$ docker-sync stop

# ファイルを同期する
$ docker-sync sync

# syncエンドポイントを一覧表示
$ docker-sync list

# syncエンドポイントの削除
$ docker-sync clean

まとめ

以上で快適にLaravelの開発をするための環境の構築が完了しました。

今回作成したDockerプロジェクトをチームで共有することで各メンバーが同じ環境で開発を行うことが出来る様になり、環境構築や作業の効率もアップするのではないでしょうか。

さいごに

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。

興味のある方、ご応募お待ちしております!

www.wantedly.com

www.wantedly.com

Sass(SCSS)チートシート

自己紹介

株式会社SCOUTERの石岡(id:masaakikunsan)です。

フロントエンドエンジニアをやらせていただいており、
冴えない彼女の育てかたと氷菓というアニメを主食に生きております。

プログラミングを始めてまだ一年も経っていないひよっこなので僕のブログでは初心者にフォーカスして初心者がつまづきそうとか欲しいであろうことをブログにしていこうと思っています。

はじめに

みなさんなんだかんだSass(SCSS)の構文って忘れがちじゃないですか?

ちなみに僕はいつまで経っても覚えません。

今回のブログではSCSS構文について書かせていただきます。

概要

SassとはCSSを書くためのメタ言語になります。まぁつまりCSSを効率よく書くためのものですね。

Sassには二つの構文があり、ファイルの拡張子が.sassのものと.scssのものになります。

昔はインデント構文で書かれたSassのみだったのですが今はCSSっぽく書けるSCSSができSCSSが現在よく使われています。

導入

Sassを動かすにはRubyが必要なので前提条件としてRubyはいれといてください。

# インストール
$ gem install sass
# もしpermissionsがどうのこう言われてインストールできなかったら $ sudo gem install sass

これでSassがインストールできたかと思います

最後にバージョンを確認してみましょう

$ sass -v

コマンド

$ sass [option] [input.scss]:[output.css]

optionはめんどいので記載しない

ネスト

・セレクタを入れ子構造でかけるから便利!

// CSSの場合
div {
    background: #000;
}
div p {
    color: #fff;
}

// SCSSの場合
div {
    background: #000;

    p {
        color: #fff;
    }
}

・隣接セレクタの場合

// HTMLの場合
<label><input type="radio">test</label>

// CSSの場合
input {
    display: none;
}
span {
    position:relative;
}
span::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 50%;
    content: "";
}
input:checked + span::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: #6ac5b6;
    border-radius: 50%;
}

// SCSSの場合
input {
    display: none;
    
    span {
        position:relative;

        // &はその親要素のセレクタを表す、この場合span
        &::before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 14px;
            height: 14px;
            border: 1px solid #999;
            border-radius: 50%;
            content: "";
        }
    }
    &:checked + span::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        background: #6ac5b6;
        border-radius: 50%;
    }
}

変数

よく使う値を変数にしたりプロパティ名やセレクタ名とかにも使える。

$color-base: #ddd;
$class: container;
// SCSS
p { color: $color-base }
.#{$class} { background: $color-base; }
            
// CSS
p { color: #ddd }
.container { background: #ddd; }

ミックスイン

よく使うものをスニペットとして保存しておけるのでとても便利。

// よく使うものの頭に@mixinをつけて保存し使いたい所の頭に@includeをつけるだけ
@mixin box-shadow ($x $y $gradation $color) {
    box-shadow: $x $y $gradation $color;
}
        
div {
    @include box-shadow(1px 1px 5px #000;);
}
        
// CSS
div {
    box-shadow: 1px 1px 5px #000;
}

継承

styleが一緒だけどここではfont-sizeを変えたいというときに便利。

p {
    font-size: 16px;
    margin: 0;
    color: #ddd;
}
            
.required {
    @extend p;
    font-size: 12px;
    color: #FF0000;
}
            
// CSS
p, .required {
  font-size: 16px;
    margin: 0;
    color: #ddd;
}
            
.required {
    font-size: 12px;
    color: #FF0000;
}

まとめ

最後まで読んでいただきありがとうございました。

SCSSを使うと大分CSSの運用がしやすくなります。

ルールなどをちゃんと設けておくといろんな人と開発してもかなり綺麗にCSSをかけるのではないでしょうか?

今回は省きましたが演算ができたり制御構文など便利なのが多いです!私はよく制御構文を使います。

次回はSCSSを使ってドット絵を書いてみたかLINE APIを使って加藤恵を作ったのどちらかをブログにしようかなと思います。

最後に...

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。 興味のある方、ご応募お待ちしております!

Laravel
https://www.wantedly.com/projects/101401

React
https://www.wantedly.com/projects/101403

Laravel/Vue.js勉強会を開催しました!

6/21(水)に Laravel/Vue.jsの勉強会を開催いたしました!

f:id:kotamat:20170622101837j:plain

会場は株式会社オルトプラス様

勉強会用にオフィスを無料で開放していただけるとのことで、今回使わせていただきました!

Laravel/Vue.jsともに人気が上昇中していたり、Laravelの公式がVue.jsをサポートし始めたりと、人口は増加しているにもかかわらず、他のフレームワークに比べて勉強会等がほとんど開催されていないということで、勉強会を開催することとなりました。

勉強会を公募した際、思った以上に反響が大きく、2日で80名を超える応募がありました。

[増席しました!]Laravel/Vue勉強会#1 - connpass

当日も強風、雨の足元の悪い中、30人以上の方にご参加頂きました。

今回はLaravel / Vue.jsを実際に導入されている4社の技術者の方々から実例やお話をしていただき、その後LT参加枠の方から3名LTをお話していただきました。

Laravelでプチマイクロサービスやってみた/ @kotamat

弊社からは現在取り入れている社内用パッケージモジュール化についてお話しました。

複数リポジトリにまたがる共通処理をcomposerを使ってDRYに書く方法をお話しました。

speakerdeck.com

Vue.jsを使ったら幸せになった話/ 中筋さん

LaFabricのシステムにVue.jsを選定した背景と、導入してみてどうなったかをお話していただきました。

speakerdeck.com

Laravelによる SSPの開発と運用 / 安藤さん

オルトプラスさんで開発されていた、SSPアプリケーションをLaravelで構築した際の構成や、運用方法をお話していただきました。

speakerdeck.com
Laravel Mix とは何なのか? / @okashoi

Laravelに導入されているgulpプラグインであるLaravel Mixに関して、概要と実際の導入方法に関してライブコーディングをしていただきました。

speakerdeck.com

 

発表後は懇親会を行いました。

f:id:kotamat:20170622102301j:plain

f:id:kotamat:20170622102254j:plain

自社で導入されている方や、これから勉強されるという方等多種多様な方がいらっしゃいました。

今後も勉強会を開いていければと思いますので、興味のある方はご連絡いただければと思います!

 

## 最後に‥

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。
興味のある方、ご応募お待ちしております!

Laravel

https://www.wantedly.com/projects/101401

React

https://www.wantedly.com/projects/101403

 

エンジニア一人ひとりの検証環境をAWSECSを使って実装してみる

はじめに

株式会社SCOUTERの松本(id:kotamat) です。

この度弊社でもエンジニアの発信をするために開発者ブログをはじめました!

ブログは持ち回りで書いていくのですが、書くに当ってwebhook等実装の検証をする必要が出てくるかと思います。ただ現状として

  • 個々人はローカルで開発している
  • そのため外部サービスからのアクセスを前提としたサービスの検証が難しい
  • 各々にHTTPSのエンドポイントを提供し、検証環境をつくりたい
  • とはいえ、各々の環境構築、管理を煩雑にしたくない

ということで、AWS ECS + ALB + ACMを使った環境構築を行いました。

CloudFormationを使用して上記環境を作ることで、環境構築・削除ができるようにしています。

出来ること

  • engineer_1.dev.example.com, engineer_2.dev.example.comのような形で、エンジニア毎にドメインを割り振れる
  • 各々のドメインに対して、Dockerのサービスベース(docker-compose.yml単位)でサービスを割り当てられる
  • HTTPS化ができる
  • エンジニアはdocker-compose up -dと同じようなコマンドで環境構築が可能

全体像

全体図はこんな感じです

f:id:kotamat:20170618222936p:plain

ALBとなっているところは、下記のようになっています

  • ALB、リスナーは一つ
  • ターゲットグループはサービス毎に存在
  • リスナーロールは443(HTTPS)と80(HTTP)それぞれサービスごとに存在
  • HTTPSのリスナーロールには、CertificateManagerで生成した証明書を設定。

また、こちらは検証用の環境で、他の環境とは独立したものとなっているので、VPCは新規で作成します。

設定方法

事前準備

  • ドメインをRoute53で管理するようにする
  • *.dev.example.comに対する証明書をCertificate Managerを使用して作成

各種AWSサービスの起動

https://github.com/kotamat/ecs_dev のcloud-formation.ymlを参考にサービスを起動します。

yamlファイルの変更

ターゲットグループはサービス毎に存在

リスナーロールは443(HTTPS)と80(HTTP)それぞれサービスごとに存在

という仕様があるため、開発者に併せてそれぞれの設定を行う必要があります。

設定自体は###developers###というコメントアウトの間に格納しており、 初期ではengineer1.dev.example.comの設定をしているので、必要に応じて下記のように変更、追記をしてください。

kotamatに変更する場合)

 ### developers ###
-#### engineer1
-  engineer1ECSALBListenerRule:
+#### kotamat
+  kotamatECSALBListenerRule:
     Type: AWS::ElasticLoadBalancingV2::ListenerRule
     DependsOn: ALBListener
     Properties:
       Actions:
       - Type: forward
-        TargetGroupArn: !Ref engineer1ECSTG
+        TargetGroupArn: !Ref kotamatECSTG
       Conditions:
       - Field: host-header
-        Values: [engineer1.dev.example.com]
+        Values: [kotamat.dev.example.com]
       ListenerArn: !Ref ALBListener
       Priority: 1
-  engineer1ECSALBListenerRule:
+  kotamatECSALBListenerRule:
     Type: AWS::ElasticLoadBalancingV2::ListenerRule
     DependsOn: SSLALBListener
     Properties:
       Actions:
       - Type: forward
-        TargetGroupArn: !Ref engineer1ECSTG
+        TargetGroupArn: !Ref kotamatECSTG
       Conditions:
       - Field: host-header
-        Values: [engineer1.dev.example.com]
+        Values: [kotamat.dev.example.com]
       ListenerArn: !Ref SSLALBListener
       Priority: 1
-  engineer1ECSTG:
+  kotamatECSTG:
     Type: AWS::ElasticLoadBalancingV2::TargetGroup
     DependsOn: ECSALB
     Properties:
@@ -335,7 +335,7 @@ Resources:
       HealthCheckProtocol: HTTP
       HealthCheckTimeoutSeconds: 5
       HealthyThresholdCount: 2
-      Name: !Join [ "-", [ !Ref "AWS::StackName", engineer1ECSTG ] ]
+      Name: !Join [ "-", [ !Ref "AWS::StackName", kotamatECSTG ] ]
       Port: 80
       Protocol: HTTP
       UnhealthyThresholdCount: 2
@@ -349,5 +349,5 @@ Outputs:
     Value: !Join ['', [!GetAtt [ECSALB, DNSName]]]
   ECSServiceRole:
     Value: !Ref ECSServiceRole
-  engineer1TG:
-    Value: !Ref engineer1ECSTG
+  kotamatTG:
+    Value: !Ref kotamatECSTG

CloudFormationの設定

まずはCloudFormationのコンソールで設定を行います。

f:id:kotamat:20170618223152p:plain

yamlファイルをアップロードし

f:id:kotamat:20170618223215p:plain

パラメータを設定します。

f:id:kotamat:20170618223219p:plain

各パラメータの説明は下記です

  • AcceptCidrIp
    • アクセス元のIP、基本的に社内ネットワークになるかとおもいます
  • DesiredCapacity
  • InstanceType
  • KeyName
  • MaxSize
  • MyCertificateArn
    • CertificateManagerで設定した値

f:id:kotamat:20170618223233p:plain

起動完了後、出力のところに各値が出力されます。こちらはあとで使用します。

Route53の設定

起動が完了したタイミングで、ロードバランサーが作成されるので、先程の出力のECSALBをRoute53の*.dev.example.comのAレコードへエイリアスとして設定します。

開発者側の設定

ecs-cliのインストー

ecs-cliインストールを参考にインストールを行います。

踏み台サーバーにECS, ECR管理ポリシーを与えたロールを与えるか、開発者に該当のポリシーを持ったIAMユーザを作成し、access-keyとaccess-secretを付与します。

先程取得したクラスタ名を使用し

ecs-cli configure -c <クラスタ名> --access-key <アクセスキー> --secret-key <シークレットキー>で登録します。

サービスの起動

ECSには動的ポートという便利な機能があります。

動的ポートを設定することで、コンテナポートを直接ターゲットグループに割り当てられるようになり、ホスト側のポートの競合を意識することなくサービスを展開できるようになります。

docker-compose.ymlを用意し、下記の変更を行います。

  • hostのポート番号を0とする(動的ポート)
  • build等ECS側で使用できないものがある場合はECRにビルドしたイメージをpushし、imageとして使用する

変更を行ったら、下記コマンドを実行します。

ecs-cli compose --file docker-compose.yml service up --target-group-arn <ターゲットグループ名> --container-port <コンテナのポート> --role <サービスロール名>

コンテナが起動したらengineer1.dev.example.comにアクセスすることでサービスを見ることができるようになります。

まとめ

ECS ALB等を使用することで、開発検証環境を簡単に作成できるようになりました。

今回だとインスタンスがオンデマンドとなりますが、SpotFleetと組み合わせる事で、より安価に検証環境を作成できるようになるので、そちらもチャレンジしてみたいです。

最後に‥

弊社SCOUTERではLaravel / Reactを使ってサービスを展開しております。 興味のある方、ご応募お待ちしております!

Laravel

https://www.wantedly.com/projects/101401

React

https://www.wantedly.com/projects/101403