webpack-dev-serverにドメインでアクセスする

やりたいこと

Dockerコンテナ上でnpm run serveしたときに任意のドメインでアクセスしたい

設定

nginx-proxyを利用して設定したドメインで各コンテナにアクセスできる状態にする。

nginx-proxyを利用した環境の構築はここ等を参考にしてください。

docker-compose.ymlはこんな感じ

docker-compose.yml

version: '3.5'

services:
  node:
    build: ./infra/node
    environment:
      VIRTUAL_HOST: "任意のドメイン"
      HTTPS_METHOD: "noredirect"
    expose:
      - 3000
    networks:
      - app-network
      - local-network
    command: sh -c "npm run serve"

networks:
  app-network:
    name: app-network
  local-network:
    external: true
    name: local-network

vue.config.jsに設定を記述します。

vue.config.js

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 3000,
    disableHostCheck: true, 
    watchOptions: {
      poll: true
  }
}

以上の設定でnpm run serveした後に任意のドメインでアクセスが可能になります。

所感

今回やりたいことを実現するにあたって正直理解できていないところがたくさんある(host: '0.0.0.0'やnginx-proxyの仕組み等)ので、一つ一つ調べて理解して使うことが大事だと痛感しました。

参考

nginx-proxyを利用した環境の構築
【超便利】DockerでPHPローカル開発環境の最強構築方法