App ServiceのWebAppsのDockerのやつ（Web App for Containersというらしい）にDockerでNuxt.js+Expressのアプリケーションをデプロイした時のメモです。
けっこうハマって@horihiroさんに色々質問して助けてもらいました。ものすごく感謝です。
けっこうハマってて途中経過などをメモってなかったのでとりあえずこの流れでできたよってところのメモだけ残しておきます。
テンプレート作成
vue-cliでテンプレート作成します。
vue init nuxt-community/express-template .
package.jsonはこのまま。 ここのstartの箇所でnuxt buildが入ってるのがポイントで、WebApps側がイメージを起動する際にnuxt buildでビルドが走り、.nuxtフォルダが生成されます。これがないとnuxtが起動しないっぽい。
package.json
・
・
・
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt build && nuxt start",
"precommit": "npm run lint",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
・
・
・
.dockerignore
.dockerignoreをルートに設置。
node_modules/
npm-debug.log
.nuxt/
Dockerfile
Dockerfileもルートに設置。 alpineイメージを使うと良いっぽいのでこんな記述
-
npm i --production --no-progress:--productionでdevdependenciesのモジュール読み込みを無くして、--no-progressでプログレス表示を無くしてあげるとある程度早くモジュールの読み込みができるっぽい -
npm cache clean -f: キャッシュクリアしないとバグるのと-fもつけておかないとバグってました。 - EXPOSE: ポート指定
- ENV HOST: たしか0.0.0.0に指定しないとうまく起動しない
FROM node:10.9.0-alpine
RUN mkdir -p /app
COPY . /app
WORKDIR /app
RUN npm i --production --no-progress && npm cache clean -f
EXPOSE 3000
ENV HOST 0.0.0.0
CMD ["npm", "start"]
デプロイ
この状態でbuildしてイメージを固めて
docker image build -t n0bisuke/express-test:latest .
docker hubにプッシュします。
docker push n0bisuke/express-test
WebApps側でアプリケーションをDocker指定で作成してn0bisuke/express-test:latestを指定しましょう。
アプリケーション設定でPORTを指定。ここも指定がないとうまく起動してくれません。
確認
うまく起動できると、こんな感じでNuxt.js+Expressのテンプレートそのままのページが無事に表示されました
