環境構築手順
前提
- Docker Desktopがインストールされていること
Dockerコンテナ作成
1. docker-compose.ymlの作成
docker-compose.ymlファイルに以下の定義を記載します。
今回は、シンプルにVue.jsのプロジェクトを配置するためのコンテナのみの構成とします。
version: "3.4"
services:
client:
build: ./app
container_name: app
ports:
- "8080:8080"
expose:
- "8080"
volumes:
- ./app:/app
tty: true
stdin_open: true
2. Vueプロジェクトの作成先のディレクトリを作成
Vueプロジェクトの作成先のディレクトリを作成します。
mkdir app
3. Dockerfileを作成
Vueプロジェクトを配置するコンテナのイメージをDockerfileに定義し、npm、vue-cliをインストールします。
FROM node:18.1-alpine
WORKDIR /app
RUN apk update && \
npm install -g npm && \
npm install -g vue-cli
EXPOSE 8080
4. コンテナを起動
定義をしたコンテナを起動します。
docker-compose up -d --buid
Vueプロジェクト作成
5. Vueプロジェクト作成
Vue CLIを使用して、Vueプロジェクトを作成します。
docker-compose exec client sh
/app/tsun-docku # vue create .
以下の警告が表示されたら、記載に従ってvue/cliの最新版を取得します。
Vue CLI v5.0.4
? Generate project in current directory? (Y/n) Y
以下の警告が表示されたら、記載に従ってvue/cliの最新番を取得します。
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli
プリセットの要求が表示されたら、「 Default ([Vue 3] babel, eslint)」を選択して、Enterを押下します。
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
依存関係の要求が表示されたら、「Use NPM」を選択して、Enterを押下します。
Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies:
Use Yarn
❯ Use NPM
Vue Projectの作成が完了するのを待ちます。
6. 疎通確認
作成されたVueプロジェクトを起動します。
$ npm run serve
/app # npm run serve
> app@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 111561ms 10:36:52 AM
App running at:
- Local: http://localhost:8080/
It seems you are running Vue CLI inside a container.
Access the dev server via http://localhost:<your container's external mapped port>/
Note that the development build is not optimized.
To create a production build, run npm run build.
http://localhost:8080/にアクセスし、デフォルトの画面が表示されたら、初期環境構築の完了です。
