Docker：DjangoのSPA化でVue.jsのコンテナを作成したけど起動しなかった件
Docker：DjangoのSPA化でVue.jsのコンテナを作成したけど起動しなかった件
Djangoも覚えてきたので流行りのSPA化しようと画策しました。
で、こんな構成を考えてDockerを弄ってみました。
- Frontend => Vue.js
- Backend => Django
- DataBase => MySQL
- HTTPサーバ => Nginx
8080番を開放してVueを動かしたのですが、DockerをリビルドしたらVueの初期画面が消えました。
今回、解決に至った方法
原因はVueの起動コマンドが実行権限ではねられてしまっていた事でした。
なので、【 vue create project 】で生成したファイルとディレクトリを一旦すべて削除し再度プロジェクトをクリエイトして起動コマンドを実行したところ、無事にvue初期画面が立ち上がりました。
表面の原因はVue のコンテナが立ち上がっていない事
|
1 |
sudo docker ps -a |
Dockerコンテナの起動状況を確認したところ、Vueを入れたFrontコンテナが起動していません。
Vueの初期画面が消えた原因はココにあります。
では、コンテナが起動しなかった原因は？
直前の変更が問題かと思いますよね。で、Dockerfileとdocker-compose.ymlを『起動していた時の状態』に戻し再ビルドしてみました。
結果 =>【コンテナ起動せず】
しばらく原因に思い当たらず色々弄っては再ビルドを繰り返して実験していましたが、どうも上手くいきません。
で、最終的に発覚したのがディレクトリとファイルのパーミッションと所有権の問題でした。
Dockerfileとdocker-comose.ymlのFront部
作成していた構成はこんな感じです。
■Dockerfile
|
1 2 3 4 5 6 7 8 9 |
FROM node:10.15.3 #working directory WORKDIR /project #vuecliインストール RUN npm install -g @vue/cli RUN npm install -g yarn RUN npm install -g axios |
■docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
version: '3.7' services: (中略) front: container_name: front build: ./docker/front/node volumes: - ./entrypoint/frontend:/project/ command: yarn serve ports: - "8080:8080" |
■ファイル構造
│（中略）
├── entrypoint /
│ ├── frontend /
│ │ ├── .git /
│ │ ├── node_modules /
│ │ ├── pablic /
│ │ ├── src /
│ │ └── package.json
(中略)
docker-compose.yml
コンテナに入って作成したVueプロジェクトはrootで作成されている
一番最初はVueのデータが無いのでコンテナ立ち上げて、コンテナ内でVueプロジェクトの一式を作成しました。
|
1 |
vue create project |
これで無事にプロジェクトが作成され、上記ファイル構造のfrontend内が生成されました。
ただ、srcディレクトリ内の HelloWorld.vueをローカルに持ってきて弄り、SFTPでアップロードしたところパーミッションエラーが発生し、上書きする事が出来ませんでした。
まぁこの現象はLaravelの初期設定でも起こる事で、個人的には慣れたError。
コンテナを起動したときにrootで起動していたので、その後に作成したファイル群の所有者はrootです。
一方、SFTPでアップロードする際にはコンテナの入るOSのユーザー名でaccessしているため所有者はログインユーザーとなります。このギャップで「お前に触らせるファイル達はねぇ！」と怒られます。
この問題解決のため、コンテナに入り慣れたコードでユーザーとグループの作成 / パーミッションの変更をしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//WEBコンテナの中に入る $ /usr/local/bin/docker-compose exec front bash //グループの作成 $ groupadd www-data //グループにユーザーを所属 $ gpasswd -a root www-data //プロジェクトのディレクトリに移動 $ cd /var/www/project //ファイルのとフォルダのパーミッションを統一 $ find ./ -type d -exec chmod 755 {} \; $ find ./ -type f -exec chmod 644 {} \; //scrの所有グループを変更 $ chown -R :www-data ./src //既存のディレクトリ・ファイルに対して変更 $ find ./src -type d -exec chmod 775 {} \; $ find ./src -type f -exec chmod 664 {} \; //誰がどう作成しようが、作成されたファイル・ディレクトリの所有グループをwww-dataにする $ find ./src -type d -exec chmod g+s {} \; //ACLのデフォルト設定し、srcの配下に新規ファイルやディレクトリが作られるときの自動処理設定 // ※ ディレクトリは775に、ファイルは664に自動的に設定するように指示 $ setfacl -R -d -m g::rwx ./src |
そして結果的に『これ』がコンテナ起動の妨げになっていました。
エラーが発生していたのは起動コマンド【yarn serve】
今回の問題児が起動コマンド yarn serve であった事は間違いありません。
このコマンド外してリビルドしたところ、コンテナ立ち上がりました。
ただ、推測としては起動コマンドが動かす『package.json』辺りなのではと思っていますが、正確にどのファイルではねられたかはわかりません。
Vue.jsの設定ファイル【vue.config.js】にも要注意
これもsudo権限使って作成していたりするとパーミッションが644になります。rootで644でも「コンテナが立ち上がらない」とはなりませんが、コーディングにミスがあるとコンテナが起動しません。
Vueが動かないではなくて、コンテナが起動しないのでコンテナ内に入っての修正は不可能です。
Vueプロジェクト直下のファイル達には十分注意しましょう。
上手くいかない時は誰がどの権限で何を実行しているのかもう一度見直してみよう
コードばかり見ていたのでこの問題に気付かず無駄に捜査に時間をかけてしまいました。
コンテナが起動しな原因の一つに【実行コマンドのエラー】がある事は理解しておく必要があると思います。
まとめ
失敗はいい経験ですけど、できれば失敗したくないですよね。
いやぁ、なんか無駄に疲れた。
-
前の記事
Django：ReportLabによるPDFデータ作成で苦戦したところ 2021.03.15
-
次の記事
Vue.js：DjangoのSPA化で記録しておいた方が良いと感じたErrorと改善方法 2021.03.19