nuxtプロジェクトを独自ドメインでSSR（CloudFront -> ALB -> Fargate） #AWS

nuxtあまり関係なかった
2018.10.4現在
スケーリングや死活監視、CI・CDのぞく、実運用環境ではなく取り敢えず動かしてみました系です

全体像

目的： https://example.jp でfargateコンテナのnuxt ssrにアクセスする
手順
1. Docker対応（image作ってECRにpush）
2. Fargateクラスタ作成
3. ALB設定
4. CloudFront設定

1. Docker対応（image作ってECRにpush）

目的：現プロジェクト(nuxt)をdockerに対応する

プロジェクトのpackage.jsonと同じディレクトリにDockerfile, .dockerignoreファイルを作って配置

Dockerfile

FROM node:10-alpine

ENV HOST 0.0.0.0

RUN mkdir -p /app
COPY . /app
WORKDIR /app

ARG ENV
ENV ENV $ENV

RUN yarn && yarn build

EXPOSE 3000

CMD ["yarn", "start"]

.dockerignore

node_modules/
.nuxt/

docker image build でプロジェクトのimageを作る。

$ cd path/to/dir
// "hoge/fuga"がimage名、"0.0.1"がタグ、"."でカレントディレクトリ
$ docker image build -t hoge/fuga:0.0.1 .

docker tagでタグ付け（バージョニング）
- 先にECR関係の設定をしておく必要がある。
- まず、Amazon ECSからリポジトリを登録する。上記例の場合はhoge/fugaがリポジトリ名
- つぎに、ECRにアクセスするためにawsへログイン。"region" "profile"はそれぞれ合わせる
- https://docs.aws.amazon.com/ja_jp/AmazonECR/latest/userguide/ECR_GetStarted.html
```
$ $(aws ecr get-login --no-include-email --region ap-northeast-1 --profile hoge)
```
```
$ docker tag hoge/fuga:0.0.1 xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge/fuga:0.0.1

$ docker tag xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge/fuga:0.0.1 xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge/fuga:latest
```

docker pushでリポジトリに登録

$ docker push xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge/fuga:latest

image作成完了後

dockerコンテナをローカルで起動するとhttp://localhost:3000でアクセスできる
```
$ docker container run -d -p 3000:3000 --name fuga hoge/fuga:0.0.1
```

2. Fargateクラスタ作成

AWS Web Consoleにて、ECS設定画面>クラスター画面>今すぐはじめるボタンでFargateのクラスター作成チュートリアル画面にうつる（なんじゃそりゃ）

最初の画面
- コンテナの定義のCustomの設定ボタンから
  - コンテナ名 ECRでつけたimage名から適当に
  - イメージ ECR一覧の該当リポジトリのリポジトリの URI
  - メモリ制限 とりあえず空で大丈夫なはず
  - ポートマッピング 3000
  - 詳細コンテナ設定 とりあえずskipしても動く
- タスク定義
  - cpuとメモリ制限設定して無ければ何もいじらなくて大丈夫
ふたつめの画面
- サービスを定義する
  - ロードバランサーの種類 Application Load Balancer(ALB)を選ぶ
  - 最初の画面でポートマッピングが自動で反映される
みっつめの画面
- クラスターの設定
  - クラスター名 ECRのイメージ名-cluster とか適当に

作成実行
- ちょっと時間がかかる
- サービスの生成に失敗することがある。同じ内容で再度作成すると成功したりする
- なんどか失敗するようならコンテナ定義のcpuとメモリ制限設定をタスク定義と同じもの設定すると良いかもしれないし変わらないかもしれない

設定完了後

ALBのDNS名+3000ポートでブラウザからアクセスできる。（セキュリティグループ等何か特別な設定してない限り）

3. ALB設定

自動で作られたALBにドメインを設定する。CloudFrontかます事考えてorigin用ドメイン（例：origin.example.jp）
1. リッスンにhttps追加、証明書はACMで発行が楽
  - 証明書ドメインはexample.jpに、*.example.jpを追加する形で作っとくと管理が楽。 origin.example.jpのみでも問題なし
2. DNS設定（Route53等）でorigin.example.jpをこのALBに向ける
  - Route53の場合は、AレコードでALIAS設定すると良い。それ以外のDNS管理ツールならCNAME
外側port３０００をssl(443)に変更、セキュリティグループも同様に３０００から443に変更
- (internet)<->ALBの話で、ALB<->Fargate間（内部）は3000のまま

設定完了後

https://origin.example.jpでアクセスできる

4. CloudFront設定

Create Distributionから
- Origin Domain Name origin.example.jp
- Origin Protocol Policy HTTPS only
- Viewer Protocol Policy Redirect HTTP to HTTPS
- Allowed HTTP Methods 必要なものを
- Alternate Domain Names(CNAMEs) example.jp
- SSL Certificate Request or Import Certificate with ACMからバージニアリージョンでexample.jpの証明書を作る（またはimport）
  - tokyoリージョンと同じドメインで証明書作れる
- 他お好みで調整の上作成
DNS設定
- Route53でAレコードAliasする際は、CloudFrontのDistribution StatusがInProgressからDeployedに変わってないと設定できないので注意

設定完了後

https://example.jpでアクセスできる

@. Fargateのデプロイ

新しいdocker imageをlatestタグ付けしてECRにアップ後、Amazon ECS>クラスター>対象クラスタ>サービス名リンククリック>更新ボタンから、 新しいデプロイの強制にチェック入れて他そのままで更新すると、勝手にlatestでデプロイしてくれる(数分かかる)

@.その後の展望

CodeBuild CodeDeployなどを使って、releaseブランチへのpushから自動でdocker build、fargate更新するとか
Fargateのオートスケーリング設定するとか
CｌoudWatchやX-Rayでサービス監視

nuxtプロジェクトを独自ドメインでSSR（CloudFront -> ALB -> Fargate）

全体像

1. Docker対応（image作ってECRにpush）

image作成完了後

2. Fargateクラスタ作成

設定完了後

3. ALB設定

設定完了後

4. CloudFront設定

設定完了後

@. Fargateのデプロイ

@.その後の展望

参考