Windows + Docker にて Nuxt.js の Sample ページを表示させる

  • 投稿者:
  • 投稿カテゴリー:docker

以下を参考にした。
WindowsでいきなりNuxt.jsに入門してみる
トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します

WindowsにてNuxt.jsを動作させる

node.jsをインストールする。

PS C:\nuxt> node --version
v14.17.6

PS C:\nuxt> npm --version
6.14.15

PS C:\nuxt> npm install -g vue-cli

PS C:\nuxt> vue --version
2.9.6

PS C:\nuxt> vue init nuxt-community/starter-template nuxt-sample
? Project name nuxt-sample
? Project description Nuxt.js project
? Author

   vue-cli · Generated "nuxt-sample".

   To get started:

     cd nuxt-sample
     npm install # Or yarn
     npm run dev

PS C:\nuxt> cd nuxt-sample

PS C:\nuxt\nuxt-sample> npm i

PS C:\nuxt\nuxt-sample> npm run dev

http://localhost:3000 にてSampleページを表示可能。

なお vue-cli 実行時にPowerShellのポリシーがRestrictedであればエラーとなるため注意。

PS C:\nuxt> PowerShell Get-ExecutionPolicy
Restricted

PS C:\nuxt> vue --version
vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\shimizu\AppData\Roaming\npm\vue.ps1 を
読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170)
を参照してください。
発生場所 行:1 文字:1
+ vue --version
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

PS C:\nuxt> PowerShell Set-ExecutionPolicy RemoteSigned

PS C:\nuxt> PowerShell Get-ExecutionPolicy
RemoteSigned

PS C:\nuxt> vue --version
2.9.6

Dockerコンテナとして動作させる

package.json に “HOST=0.0.0.0 PORT=3000” を追加する。

PS C:\nuxt\nuxt-sample> cat package.json
...
  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt",
    "build": "nuxt build",
    "start": "HOST=0.0.0.0 PORT=3000 nuxt start",
...

Dockerfileを作成して、コンテナを実行する。

PS C:\nuxt\nuxt-sample> cd ../

PS C:\nuxt> cat Dockerfile

FROM node:10.20.1-jessie

RUN mkdir -p /var/www/sampleproject
WORKDIR /var/www/sampleproject
COPY ./nuxt-sample/ /var/www/sampleproject
RUN npm run build

EXPOSE 3000

ENTRYPOINT ["npm", "run", "start"]

PS C:\nuxt> docker build -t sampleproject .

PS C:\nuxt> docker run -d -p 3000:3000 sampleproject

http://localhost:3000 にてSampleページを表示可能。