前回の軽いあらすじ
前回は
- ✅DjangoとVue.jsとの接続確認
を実施した。
今回やること
今回はフロントエンド周りの実装をしていく。
そして、今回からdocker実装にも着手していく。
docker compose
docker composeを使用する。
docker composeは複数のコンテナを1つのファイルに定義できるツールだ。
ディレクトリ構成
ディレクトリ構成は以下のようになっている。
$ tree -L 3
.
├── docker-compose.yml
├── nginx
│ ├── conf.d
│ │ └── default.conf
│ └── dist
│ └── index.html
└── vue
├── Dockerfile
└── frontend
├── README.md
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.jsvueディレクトリ内のfrontendディレクトリは前回作成したfrontendディレクトリをそのまま入れている。
docker-compose.yml
docker-compose.ymlファイルは以下のようになっている。
version: '3.8'
services:
nginx:
image: nginx:latest
container_name: nginx-container
restart: always
ports:
- "80:80"
- "443:443"
environment:
TZ: "Asia/Tokyo"
volumes:
- ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
frontend:
container_name: frontend-container
build:
context: ./vue
dockerfile: ./Dockerfile
ports:
- 8080:8080
volumes:
- ./vue/frontend:/app
working_dir: /app
tty: true
command: sh -c "HOST=0.0.0.0 npm run serve"nginx周り
nginxはDockerfileは無し。
nginxにアクセスしてくると、frontendに転送するようにdefault.confを設定する。
server {
listen 80;
server_name localhost;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_pass http://frontend:8080/; # 転送先のサーバー設定 docker-compose.ymlのservice名を指定
}
}軽く説明すると、
「proxy_set_header」はバックエンドにアクセスするときのリクエストヘッダを付け加える。
クライアントのIPアドレスやリバースプロキシのホスト名などの情報はリバースプロキシがヘッダに追加していく方法が一般的。（リバースプロキシについてはその内記事にしたい）
リクエストヘッダはここではUpgrade, Connection, Hostがある。
- Upgrade：プロトコル変更のネゴシエーションに使用するヘッダ
- Connection：リクエスト完了後に接続を保つかどうかを示す。
- Host：サーバのホスト名を示す。proxy_passで指定したupstream名に書き換えられる。
Vue CLI
上記でも記載のように、vue cliの設定ファイルはfrontendディレクトリの中にあり、これは前回作成したそのまんまのもの。
Dockerfileの設定は以下。
FROM node:20-alpine3.17
WORKDIR /app
RUN apk update && \
npm install -g npm && \
npm install -g @vue/cli👹ブラウザ画面表示でハマった話
vue cliをブラウザ画面で表示する際にvueの画面が表示されない。
curlを実行すると以下のようなエラー。
$ curl localhost:8080
curl: (56) Recv failure: Connection reset by peer解決法🧙♀️
原因としては、アプリケーションとしては127.0.0.1:8000でListenしているが、コンテナのIPでListenしていないから。
解決策としては、「npm run serve」ではなく、「HOST=0.0.0.0 npm run serve」とする。
このため、上記で記載しているdocker-compose.ymlのfrontendのcommandは「HOST=0.0.0.0 npm run serve」になっている。
参考は以下のサイト。
まとめ
今回は、
- ✅Nginxのコンテナ化（フロントエンド）
- ✅Vue.jsのコンテナ化とVue.jsとNginxの接続（フロントエンド）
を実施した。
これで全体としてのTodoリストは以下のようになった。（前回の記事に書いてなくて必要だと思う項目も追加した。）
- ✅DjangoとVue.jsとの接続確認
- ✅Nginxのコンテナ化（フロントエンド）
- ✅Vue.jsのコンテナ化とVue.jsとNginxの接続（フロントエンド）
- ◻️Djangoのコンテナ化（バックエンド）
- ◻️mysqlのコンテナ化（バックエンド）
- ◻️証明書の自動更新
- ◻️（※New!!）Vue CLIの設定
- ◻️（※New!!）vue-leafletの実装
次回はバックエンド周りの実装を進めていく。
僕も使っている、SakuraのVPSサーバー。この記事のサービスもこのVPSサーバーで動いています。👇
ドメインはこちらでも取得可能！👇
