0
Help us understand the problem. What are the problem?

posted at

docker-composeにてVue.jsの開発環境を構築する

環境構築手順

前提

  1. 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に定義し、npmvue-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/にアクセスし、デフォルトの画面が表示されたら、初期環境構築の完了です。

image.png

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?