以下を参考にした。
・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ページを表示可能。