Docker+Vite+Vueで作るフロントエンド環境

はじめに

以前作成した下記の環境がローカル環境に直接立てる実装になっていたため、Dockerを使用できるように変更していきます。

Amplify+Vueでログイン機能搭載のToDoアプリを作る

はじめに下記のドキュメントを元にVueプロジェクトをAmplify上にデプロイしてみます。環境Windows11Githubリポジトリ作成初めに、Github上にリポジトリを作成します。「Create repository from tem...

kemushitech29.com

2024.10.18

vite.config.tsの修正をしておらず、ローカルからDockerコンテナ内で立ち上がっているVue環境にアクセスできなかったので注意しましょう。

WSL2の起動

以下のコマンドを入力し、WSL2の環境を立ち上げます。

$ wsl

Dockerfileの作成

以下の内容のDockerfileを作成します。

FROM node:18.15.0

SHELL ["/bin/bash", "-c"]

RUN mkdir workspace

COPY . workspace

WORKDIR /workspace

RUN npm install

RUN npm fund

docker-compose.ymlの作成

以下の内容のdocker-compose.ymlを作成します。

version: '3'
services:
  app:
    build: .
    ports:
      - 5173:5173
    tty: true

vite.config.tsの修正

vite.config.tsのdefaultConfigにserverの設定を追加します。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  server: {    // -------ここから---------------
    host: true
  },// ------------------ここまでを追加---------
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

コンテナの起動

Dockerコンテナを起動し、コンテナの中に入ります。

docker compose up -d

docker exec -it amplify-vue-template-app-1 bash

Vue環境の起動

開発環境を起動します。

npm run dev

続いて、開発環境にアクセスし問題なくDockerで環境を立ち上げられることを確認します。

http://localhost:5173/にアクセスできることを確認します。

おわりに

私はvite.config.tsの修正が必要だということに気が付けず、1時間ほど無駄にしてしまったのでご注意ください。