Nuxt3アプリ開発環境をdocker-composeで整えたい
にー兄さんキッカケとして
この記事を読んで、Webフロントエンドオンリーな開発環境もちゃんとコンテナ化できるようになりたいなと思った
にー兄さんそして、自分は今年度中に自分のポーフォリをNuxt3で作りたいと考えていて
せっかくなのでのちのちメンテすることも考えながらdocker環境で作りたいと考えていた
にー兄さん自分のスキルセットとかポジションとか
- Webはサブスキル（Unityクライアント開発がメイン）
- TSやViteを使ってWebGLの開発はするけど、基本ノンフレームワーク
- Vue/Nuxtは詳しくないけど使える（興味があるのでNuxt3の情報は定期的に追っている）
- dockerは使うことはあるけど初心者。docker Composeの経験はなし
- docker desktopの環境構築に失敗したのでdocker toolboxを使っている
- Webフロントエンドは基本素のWindowsに環境を構築する（WSLとかも使わない）
にー兄さんポーフォリを作るのがモチベなのでSSG前提
Nuxt3はプレビューだがgenerateコマンドは使える
ホスティング先はAzure Static Web Appsを予定している
CI/CDはGitHub Actionsで、actionsの中でgenerateする
せっかく環境をコンテナ化するので、できればactionsでもdockerを使ってgenerateしたい
にー兄さん本scrapの趣旨とはずれるが、コンテンツはContentfulから取得する予定
にー兄さんなんとなく技術構成を考えてみる
にー兄さん自分の環境でdocker composeによるPython flask - redisのサービスが動くかを試していた
しかしアプリは動いているけどなぜかホストマシンのlocalhostにポートフォーワーディングできていないみたいで
色々調べた結果
Docker machineのipを直接指定する必要があるらしい
これでおそらくComposeは動くようになった
にー兄さんnuxt3のdocker composeの作り方の参考
にー兄さんとりあえずRemote containerの件もあるのでいったん記事を進めてみる
そしたらnpx nuxi init .でpermission deninedになってしまった
強硬策でchmod 777 /rootとすることで解決
にー兄さん最終的にnuxtのページをホストから見ることができた
ただ、ホットリロードがされないのは仕様なんだろうか
にー兄さん無事Remote container越しにvscodeから開発できる環境が整った
ホットリロードするためにはViteで別のポートもフォワーディングの設定しておく必要があったので、
最終的なDocker fileとdockercompose.ymlは次
FROM node:16-alpine
RUN mkdir src
RUN apk update && \
apk upgrade && \
apk add git && \
npm install -g npm@latest nuxi nuxt3
version: '3'
services:
app:
build: .
volumes:
- ./src:/src:cached
- node_modules:/src/node_modules
working_dir: "/src"
ports:
- 3000:3000
- 24679:24679
tty: true
environment:
- HOST=0.0.0.0
- PORT=3000
- CHOKIDAR_USEPOLLING=true
volumes:
node_modules:
にー兄さんdev containerの設定もしてみた
{
"name": "Nuxt3 App",
"dockerComposeFile":"./docker-compose.yml",
"service": "app",
"workspaceFolder": "/src",
"extensions": [
"Vue.volar"
],
"shutdownAction": "stopCompose"
}
次はdockerを使ったgithub actionsでのビルドを試したいな、どうなるんだろう
にー兄さんgithub actionsでdocker composeを使う方法検索してたら、
普通にactionsにデフォルトでdockerは使えるらしく、
たぶんローカルでやる時と全く同じ方法で試せるっぽい
にー兄さんなんかyarnとかnpmでパッケージインストールが発生するたびになんかpermission denied言われるなーと思ったら、USERを指定する必要があるみたい
にー兄さんnpx eslint --initでめっちゃpermission deniedされまくんってた
chmod -R 777 ./node_modulesでいったん回避できそう
にー兄さんnuxt3向けのeslintの設定はこちらを参考に
にー兄さんPrettierの設定は以下のエントリを参考に
にー兄さんnuxt3 で動的ルーティングをする方法についての記事
Nuxt2までは_id.vueのようにしていたけど、Nuxt3では[id].vueのようなファイル名になるみたい
このidは$route.params.idの様に取得可能
にー兄さんその後Azure SWAへのデプロイもできた
今回はyarn generateコマンドを使いたかったので、カスタムビルドコマンドを設定
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_STONE_0FCA96600 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/src" # App source code path
api_location: "" # Api source code path - optional
output_location: ".output/public" # Built app content directory - optional
app_build_command: "yarn generate"
###### End of Repository/Build Configurations ######
これ書いてて、いやビルドにdockerつかってないやん！ってなった
swaのビルドパイプラインではdockerコマンドを利用でkなかったので、
完全にビルドパイプラインをカスタマイズすることにする