Closed23

Nuxt3アプリ開発環境をdocker-composeで整えたい

にー兄さんにー兄さん

そして、自分は今年度中に自分のポーフォリを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したい

にー兄さんにー兄さん

自分の環境でdocker composeによるPython flask - redisのサービスが動くかを試していた
https://docs.docker.jp/compose/gettingstarted.html#compose-gettingstarted-step3

しかしアプリは動いているけどなぜかホストマシンのlocalhostにポートフォーワーディングできていないみたいで
色々調べた結果
Docker machineのipを直接指定する必要があるらしい
https://stackoverflow.com/questions/42866013/docker-toolbox-localhost-not-working

これでおそらくComposeは動くようになった

にー兄さんにー兄さん

nuxt3のdocker composeの作り方の参考
https://zenn.dev/szn/articles/nuxt-3-with-docker-compose

にー兄さんにー兄さん

このエントリの中で触れられている通り、
Dockerでnode_modulesを扱う際に
何も考えずにVolumeをマウントしてしまうとホスト側の変更が伝わってしまうことで
コンテナの環境が破壊されてしまう

それをしないためにも工夫が必要そう
https://zenn.dev/foolishell/articles/3d327557af3554

にー兄さんにー兄さん

とりあえず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
docker-compose.yml
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の設定もしてみた

.devcontainer.json
{
  "name": "Nuxt3 App",
  "dockerComposeFile":"./docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/src",
  "extensions": [
    "Vue.volar"
  ],
  "shutdownAction": "stopCompose"
}
にー兄さんにー兄さん

次はdockerを使ったgithub actionsでのビルドを試したいな、どうなるんだろう

にー兄さんにー兄さん

その後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 ######
このスクラップは2022/10/09にクローズされました