はじめに
naritomoと申します。
本職はインフラエンジニアを行っています。
最近フロント技術にも興味があり、React/VueについてDockerコンテナとして
立ち上げてみました。
いろいろアドバイスいただけると嬉しいです。
立ち上げ概要
mac環境にて、
docker-composeを使用してVue/Reactコンテナを立ち上げるものになります。
完成しているソースは以下にあります。
なぜ、あえてDockerなのか？
インフラエンジニアとしてDockerから触れたほうが扱いやすく、
以下の利点を感じられたため、開発環境構築ではDockerを使用することを
推しています。
- OS問わず同じ開発環境での開発が可能
- 独立したフロントエンドコンテナを構築することにより、
バックエンドと分離した開発検証が可能。
事前準備
mac+DockerCompose+vscode+gitでの環境を構築してること。
開発環境構築方法(Vue)
docker構成フォルダ構築
ルートフォルダを作成する。
mkdir vue-docker
cd vue-docker
Dockerfileを作成し、以下の内容を入れる。
# Node.jsイメージをベースにする
FROM node:latest
# アプリケーションのディレクトリを作成する
WORKDIR /app
# アプリケーションの依存パッケージをインストールする
COPY package*.json ./
RUN npm install
# アプリケーションのソースコードを追加する
COPY . .
# アプリケーションをビルドする
RUN npm run build
# アプリケーションを起動するコマンドを指定する
CMD ["npm", "run", "serve"]
Docker-compose.ymlを作成し、以下の内容を入れる。
version: "3.9"
services:
vue-app:
build: .
ports:
- "8080:8080"
volumes:
- .:/app
- /app/node_modules
コンテナ立ち上げ
docker-compose build
docker-compose up -d
サイト確認
以下のURLにアクセスし、Vueトップ画面が出てくること。
http://localhost:8080/
以下のファイルを編集し、トップ画面内容が変わることも確認してください。
vue-docker/src/App.vue
開発環境構築方法(React)
docker構成フォルダ構築
ルートフォルダを作成する。
mkdir react-docker
cd react-docker
Dockerfileを作成し、以下の内容を入れる。
# 公式Node.jsイメージをベースにする
FROM node:14
# 作業ディレクトリを設定する
WORKDIR /app
# package.jsonとpackage-lock.jsonをコピーする
COPY package*.json ./
# 依存関係をインストールする
RUN npm install
# アプリケーションのソースコードをコピーする
COPY . .
# 開発用サーバーを実行する
CMD ["npm", "start"]
Docker-compose.ymlを作成し、以下の内容を入れる。
version: "3.9"
services:
react-app:
build: .
ports:
- "3000:3000"
volumes:
- .:/app
- /app/node_modules
コンテナ立ち上げ
docker-compose build
docker-compose up -d
サイト確認
以下のURLにアクセスし、Reactトップ画面が出てくること。
http://localhost:3000/
以下のファイルを編集し、トップ画面内容が変わることも確認してください。
react-docker/src/App.js
開発環境操作
開発環境コンテナ起動/設定再読み込み
docker-compose up -d
開発環境コンテナ停止
docker-compose stop
開発環境コンテナ破棄
docker-compose down
おわりに
フロント技術習得の第一歩として、Vue/React稼働dockerを構築してみました。
この作成にはchatgptも利用して構築しています。
この記事がVue/Reactを扱う方の助けになればと思います。