Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@n0bisuke

Azure WebAppsにNuxt.js+Expressの環境をDockerでデプロイしたときのメモ

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のテンプレートそのままのページが無事に表示されました

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?