NuxtのアプリをDockerに移行して、ECRにプッシュするまで

目次

1. 背景
2. ECRレポジトリの作成
3. docker imageの作成
4. ローカルでdocker runをしてdocker imageを実行（確認作業）
5. ECRにdocker imageをpush

背景

Nuxtを使ったSPAのWebサービス、ちゃんと動いてはいたんですけど、
「ビルドをするたびにユーザー側では画面出なくなっちゃうの？」
という問題がありまして、じゃあNuxt用のサーバーを2台用意して縮退して…とか考えたものの
「細かい画面の変更とかの度にそのオペレーションやるの？」
ってことで、このご時世、やっぱりDockerからは逃げられないのかな…ってことで観念しました。
（Nuxtの開発を頼んだ外注先にはDocker込みの設計でお願いした気がするんだけどな…）
（「dockerは使ってません！」って言われた時に引いたのが間違いだったな…）

参考

Nuxt.jsでアプリ作成→Dockerfileを使ってイメージ作成→fargateでデプロイ→ドメイン設定・SSL化まで
Nuxtのアプリは問題なく動いているので、
1. nuxtアプリ作成
2. ローカル環境にてnuxtアプリを実行（確認作業）
は不要と判断。

ECRレポジトリの作成

AWSのコンソールから作りました。 名前くらいしか決めていないですし、省略。

docker imageの作成

Dockerfileは、Nuxtのプロジェクトディレクトリの下に作るらしい。なるほど。

# Nodeイメージの取得
FROM node:14.4.0-alpine
# ワーキングディレクトリの指定
WORKDIR /app
# パッケージをコピー(このファイルだけ別にして先にインストールしたほうが良い)
COPY package*.json ./
# npm モジュールをインストール
RUN npm install --quiet
# その他のファイルをコピー
COPY . .
# このコマンドをしないといけないとwarnが出たので
RUN npm rebuild
# 本当はいらないが開発環境でvue-cliを使っていたのでそこに含まれているパッケージを使っているようでwarnが出たので入れ
る
RUN npm install vue-cli -g
# ビルドします
RUN npm run build
# PORT3000で動かす
EXPOSE 3000
# 起動コマンド
CMD ["npm", "run", "start"]

docker imageの作成

docker build -t <repositry-name> .  

こけた（赤字まみれで超怖い）

Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する
たぶんこれだと思うのよね…

というわけで、Dockerfileを修正。

# Nodeイメージの取得
FROM node:14.4.0-alpine
# ワーキングディレクトリの指定
WORKDIR /app
# パッケージをコピー(このファイルだけ別にして先にインストールしたほうが良い)
COPY package*.json ./
#依存関係をインストール
RUN apk update && </span>
apk upgrade && </span>
apk add --no-cache make gcc g++ python && </span>
# yarn installの記載場所を移動
yarn install
# npm モジュールをインストール
RUN npm install --quiet
# その他のファイルをコピー
COPY . .
# このコマンドをしないといけないとwarnが出たので
RUN npm rebuild
# 本当はいらないが開発環境でvue-cliを使っていたのでそこに含まれているパッケージを使っているようでwarnが出たので入れる
RUN npm install vue-cli -g
# ビルドします
RUN npm run build
# PORT3000で動かす
EXPOSE 3000
# 起動コマンド
CMD ["npm", "run", "start"]

docker imageの作成（再チャレンジ）

docker build -t <repositry-name> .  

赤字のwarnはたくさん出たけど、無事に成功したっぽい。
warnはオレンジ色とかで出してくれないかな…

ローカルでdocker runをしてdocker imageを実行（確認作業）

docker run -it -p 3000:3000 <repositry-name>

動いたっぽい。

   lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk
   x                                           x
   x   Nuxt.js v2.12.2                         x
   x   Running in production mode (spa)        x
   x   Memory usage: 23.6 MB (RSS: 68.7 MB)    x
   x                                           x
   x   Listening on: http://172.17.0.2:3000/   x
   x                                           x
   mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj

curlコマンドで確認してみる。

curl http://localhost:3000/
curl http://172.17.0.2:3000

どっちもちゃんと画面が返ってきたので問題なさそう。

ECRにdocker imageをpush

ECRにログイン

(aws ecr get-login --no-include-email --region ap-northeast-1)

ぶわーっと色々出てくる。
出てきたものをコピペして実行したら、「Login Succeeded」と出た。
最初はこのコマンドだけでログインできるんだと思っていた…

tagの変更

docker tag <repositry-name>:latest ************.dkr.ecr.ap-northeast-1.amazonaws.com/<repositry-name>:latest

さらっと終わる。

push

docker push ************.dkr.ecr.ap-northeast-1.amazonaws.com/<repositry-name>:latest

時間がかかる。
ECRのコンソール画面から確認すると、イメージが出来上がっている！！
簡単！！