{"componentChunkName":"component---src-templates-single-post-js","path":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/","webpackCompilationHash":"0bb9bd8306defc5c5a8b","result":{"data":{"post":{"frontmatter":{"meta":{"title":"blog","description":"blog aws","noindex":null,"canonicalLink":null},"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）","template":"SinglePost","subtitle":null,"date":"2019-08-09T21:55:33.412Z","categories":[{"category":"Tech"}]},"html":"

今まではgitlabでソースを管理していたため、gitlab-ciを使い、クラウドサーバー常にneginx-proxyでリバースプロキシーしてWebアプリを作成していたが、よりpublicかつデファクトスタンダードになりつつあるgithubでソースを管理する必要性を感じたため、gitlabからgithubに移行。それに伴いアプリのパイプラインを構築しようとしました。
\nbacklogを使っていた時期もあり、gitlabと同様に任意のサーバーにnginx-proxyをたて、jenkinsなどでデプロイしても良かったが、個人的にいろいろなサービスを使うことは管理が大変になるので避けたかった。
\nそこで、極力AWSを使い実現する。\nまた、Netlifyなど無料で静的コンテンツを配信していたが、いかんせんネットワーク周りやドメイン、ルーティング周りがうまくいかないので、AWSに全てをよせRoute53周りで簡単に解決しかったので、対応しました。

\n

早速やっていく

\n

まずは、CodePipeline/CodeBuild/ECR/ECS/Fargateのコンテナデプロイ基盤を構築してみました - LCL Engineers' Blog\nを参考にコードベースで行なっていたが、やはりポリシーやネットワーク周りがうまくいかず、玄人向け感がすごかったので断念。また、NATゲートウェイとNLBを使って構築していたが、料金が高くなりそうだったので、NATゲートウェイを使わず、ALBで対応。

\n

構成

\n

\"struct.png\"

\n\n

route53でドメインを取得して、証明書を発行する。

\n

下記を参考にすればいける。\nAWSのサービスでドメインを取得しALBでSSLで接続出来るようにする - Qiita

\n

VPC周り

\n

VPCとVPCサブネットの作成、EC2とRDSの構築、ELB設定まで | Qrunch（クランチ）

\n

ユーザ：develop-deploy

\n

VPC作成

\n

\"vpc1.png\"

\n

VPCサブネットを作成

\n

名前タグ：vpc-web-app-subnet-web-a
\nVPC:上記で作成したVPC
\nアベイラビリティーゾーン：ap-northeneast-1a
\nIPv4 CIDR ブロック：10.0.0.0/24

\n

\"vpc-subnet1.png\"

\n

名前タグ：vpc-web-app-subnet-web-c
\nVPC:上記で作成したVPC
\nアベイラビリティーゾーン：ap-northeneast-1c
\nIPv4 CIDR ブロック：10.0.1.0/24

\n

\"vpc-subnet2.png\"

\n

名前タグ：vpc-web-app-subnet-db-a
\nVPC:上記で作成したVPC
\nアベイラビリティーゾーン：ap-northeneast-1a
\nIPv4 CIDR ブロック：10.0.10.0/24

\n

\"vpc-subnet3.png\"

\n

名前タグ：vpc-web-app-subnet-db-c
\nVPC:上記で作成したVPC
\nアベイラビリティーゾーン：ap-northeneast-1c
\nIPv4 CIDR ブロック：10.0.11.0/24

\n

\"vpc-subnet4.png\"

\n

セキュリティグループを追加する

\n

セキュリティグループ名：web-app-lb-sg
\n説明：ALB
\nVPC：上記で作成したVPC
\n※作成後一覧よりNameにセキュリティグループ名を設定

\n

\"vpc-sg1.png\"

\n

同様に下記設定でも作成する

\n

セキュリティグループ名：web-app-web-sg
\n説明：ECS-WEB
\nVPC：上記で作成したVPC
\n※作成後一覧よりNameにセキュリティグループ名を設定

\n

セキュリティグループ名：web-app-db-sg
\n説明：DB
\nVPC：上記で作成したVPC
\n※作成後一覧よりNameにセキュリティグループ名を設定

\n

セキュリティグループ名：web-app-ssh-sg
\n説明：ECS-SSH
\nVPC：上記で作成したVPC
\n※作成後一覧よりNameにセキュリティグループ名を設定

\n

\"vpc-sg2.png\"

\n

セキュリティグループにインバウンドルールを追加する。

\n

一覧の下部インバンンドルールのタブより追加する。

\n

web-app-lb-sg\n\"vpc-sg3.png\"

\n

web-app-web-sg
\nタイプ：カスタムTCPルール
\nプロトコル：TCP
\nポート範囲：8080
\nソース：カスタム　web-app-lb-sgのグループID

\n

\"vpc-sg4.png\"

\n

web-app-db-sg
\nタイプ：MYSQL/Aurora
\nプロトコル：TCP
\nポート範囲：3306
\nソース：カスタム　web-app-web-sgのグループID
\n\"vpc-sg5.png\"

\n

web-app-ssh-sg
\nタイプ：SSH
\nプロトコル：TCP
\nポート範囲：22
\nソース：カスタム　0.0.0.0/0, ::/0
\n※ステップサーバー等を置いている場合はソースに適切なIPを設定してください。
\n\"vpc-sg6.png\"

\n

RDS周りの設定（今回のサンプルアプリでは使わない予定）

\n

RDSサブネットグループを作成

\n

Amazon RDSのサイドバーからサブネットグループを選択

\n

名前：web-app-rds-subnet-grp
\nVPC：上記で作成したVPC
\nサブネット：vpc-web-app-subnet-db-a、vpc-web-app-subnet-db-c ※サブネットIDしか出てこないのでVPCのサブネットからサブネットIDを確認して設定

\n

\"db-subnet1.png\"

\n

RDSインスタンスを作成する

\n

データベースの作成より作成する
\nエンジンのタイプ：Mysql ※お好きなものを選択してください。
\nテンプレート：無料利用枠　※私の場合はこれでOK
\nDBインスタンス識別子：web-app-db-1 ※適当に設定
\nユーザー名とパスワードを入力
\nVPC：上記で作成したVPC
\nサブネットグループ：web-app-rds-subnet-grp
\nパブリックアクセス可能：あり　※適宜設定
\nVPCセキュリティグループ：既存の選択
\nVPCのセキュリティーグループ：web-app-db-sg ※defaultも設定しておくが、いらないと思う。
\nAZ：指定なし
\nデータベースポート：3306

\n

インターネットゲートウェイとルートテーブルの設定

\n

インターネットゲートウェイの作成

\n

VPCのサイドバーからインターネットゲイトウェイを選択し、作成する。
\n名前タグ：web-app-igw
\n\"igw1.png\"

\n

インターネットゲートウェイをVPCにアタッチする

\n

インターネットゲートウェイの一覧より上記で作成したインターネットゲートウェイを選択し、アクションよりVPCにアタッチする。\nVPC：上記で作成したVPC

\n

ルートテーブルを作成する

\n

名前タグ：web-app-rtb-global
\nVPC：上記で作成したVPC
\n\"rtb1.png\"

\n

名前タグ：web-app-rtb-local
\nVPC：上記で作成したVPC

\n

\"rtb2.png\"

\n

ルートの設定

\n

作成したルートテーブルを選択し、下部ルートタブより編集で設定

\n

web-app-rtb-global
\n送信先：0.0.0.0/0
\nターゲット：web-app-igw

\n

web-app-rtb-local
\n送信先：10.0.0.0/16\t※デフォルトで設定されていると思う。
\nターゲット：local　※デフォルトで設定されていると思う。

\n

ルートテーブルをサブネットサブネットの関連を設定

\n

作成したルートテーブルを選択し、下部サブネットの関連付けタブより編集で設定

\n

web-app-rtb-global
\nVPCサブネット：vpc-web-app-subnet-web-a、vpc-web-app-subnet-web-c

\n

web-app-rtb-local
\nVPCサブネット：vpc-web-app-subnet-db-a、vpc-web-app-subnet-db-c

\n

ターゲットグループの作成（アプリが増えるごとにやる必要がある？）

\n

EC2のサイドバーからターゲットグループを選択し作成する。

\n

ターゲットグループ名：web-app-tg-1
\nターゲット種類：IP
\nプロトコル：HTTP
\nポート：80
\nVPC：上記で作成したVPC

\n

\"tg1.png\"

\n

ALBを設定

\n

EC2のサイドバーからロードバランサーを選択し作成する。

\n

ロードバランサーの種類：Application Load Balancer

\n

手順1ロードバランサーの設定

\n

名前：web-app-alb
\nリスナー(HTTP)：プロトコル :HTTP ロードバランサーのポート：80
\nリスナー(HTTPS)：プロトコル :HTTPS ロードバランサーのポート：443
\nVPC：上記で作成したVPC
\nアベイラビティーゾーン（ap-northeast-1a）： サブネット：vpc-web-app-subnet-web-a
\nアベイラビティーゾーン（ap-northeast-1c）： サブネット：vpc-web-app-subnet-web-c
\n\"alb1.png\"

\n

手順2セキュリティ設定の構成

\n

証明書タイプ：ACMから証明書を選択する
\n証明書の名前：証明書を選択
\n※Route53よりドメインを発行し、作成した証明書を選択。証明書の作り方は別途記載しておく。

\n

手順3セキュリティグループの設定

\n

既存のセキュリティグループより「web-app-lb-sg」を選択する。

\n

手順4ルーティングの設定

\n

ターゲットグループ：既存のターゲットグループ
\n名前：web-app-tg-1
\n\"alb2.png\"

\n

手順5ターゲットの登録

\n

この時点ではECSインスタンスを生成していないので、登録済みのターゲットがないので、設定しない。
\nECSで自動でターゲット登録される。

\n

ここまでの参考は

\n

VPCとVPCサブネットの作成、EC2とRDSの構築、ELB設定まで | Qrunch（クランチ）

\n

AWSのサービスでドメインを取得しALBでSSLで接続出来るようにする - Qiita

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
こちらでも公開中
\"hatena\"
はてなブログ
\"luck!\"
Luck!
\n
\n
\n\n
","id":"c3a9a179-8a04-5767-b325-56f39a3a8173"},"allPosts":{"edges":[{"node":{"id":"11e872df-ccae-573a-bd93-b9c1fafbab72","fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}},"next":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"previous":null},{"node":{"id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07","fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"next":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"previous":{"fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}}},{"node":{"id":"b320c2db-f74d-5213-be91-d01c7f94f8c0","fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"next":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"previous":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}}},{"node":{"id":"cbd9c95c-a098-592c-bfd9-a936996ff335","fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"next":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"previous":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}}},{"node":{"id":"fc5fe850-be92-5297-859f-0839f6b2fbb7","fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"next":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"previous":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}}},{"node":{"id":"d8500bc6-e602-599e-a22f-80810d132de2","fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"next":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"previous":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}}},{"node":{"id":"4c934147-b318-5afd-9241-c1f5d4d75e2f","fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"next":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"previous":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}}},{"node":{"id":"04233bd7-e37d-57cb-b458-50e230b67866","fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"next":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"previous":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}}},{"node":{"id":"ecb65f65-3564-58d5-b2c6-1b712b21783b","fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"next":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"previous":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}}},{"node":{"id":"86bea805-00cf-5633-af27-2bcd764f3d42","fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"next":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"previous":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}}},{"node":{"id":"e3ba1aa1-d2b2-5519-b9b9-00efdcadbd11","fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"next":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"previous":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}}},{"node":{"id":"d31690b3-2c7d-5560-9ab4-a57d83e95b62","fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"previous":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}}},{"node":{"id":"8601b324-6161-51ed-95ce-cb5ffe1ffaa6","fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"previous":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}}},{"node":{"id":"450caa1d-e0c5-5096-95c9-13b3857b90b3","fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}}},{"node":{"id":"1877003c-32b0-5bc4-9cee-8b736797bf64","fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"next":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}}},{"node":{"id":"3777734d-dc86-5124-830b-b123179a6255","fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"next":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}}},{"node":{"id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864","fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"next":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"previous":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}}},{"node":{"id":"868b483d-2cde-508c-8978-327a3f734203","fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"previous":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}}},{"node":{"id":"f22af0ac-f3e5-5cc1-b552-8c66b6026112","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"previous":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}}},{"node":{"id":"569f7ab2-0c83-5683-81fa-21c69fd5117a","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}}},{"node":{"id":"9abaf084-569e-53db-970a-42f6b1961c26","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}}},{"node":{"id":"2b4b8b24-8bac-5d6e-b8be-be93abf830a3","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}}},{"node":{"id":"c3a9a179-8a04-5767-b325-56f39a3a8173","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"next":null,"previous":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"c3a9a179-8a04-5767-b325-56f39a3a8173"}}}