dockerでVueの開発環境を構築する【2023年】

プログラミング

今回はdockerfileの作成からVueの初期画面が表示できるまでの手順を紹介します。

目次

  1. dockerfileを作成
  2. imageファイルの作成
  3. コンテナの作成
  4. vueプロジェクト作成
  5. vueの初期設定
  6. package.jsonの修正
  7. vueの起動
  8. ブラウザで画面表示
  9. まとめ

dockerfileを作成

dockerfileを作成します。

node.jsのversionは20を使います。

作業用のディレクトリは/var/appです。

    
FROM node:20

WORKDIR /var/app/

imageファイルの作成

dockerfileからimageファイルを作成します。

dockerfileが存在するディレクトリで実行します。

imageファイル名はmyappとします。

    
docker build -t myapp .

実行結果は以下の通りです。

    
[+] Building 0.0s (6/6) FINISHED
 => [internal] load .dockerignore                                                                  0.0s
 => => transferring context: 2B                                                                    0.0s 
 => [internal] load build definition from dockerfile                                               0.0s 
 => => transferring dockerfile: 148B                                                               0.0s 
 => [internal] load metadata for docker.io/library/node:20                                         0.0s 
 => [1/2] FROM docker.io/library/node:20                                                           0.0s 
 => CACHED [2/2] WORKDIR  /var/app/                                                                0.0s 
 => exporting to image                                                                             0.0s 
 => => exporting layers                                                                            0.0s 
 => => writing image sha256:1dd89454684dbc234ba3628541a204eb67c54328b3bb63dbcff38a5c72d3817b       0.0s 
 => => naming to docker.io/library/myapp                                                           0.0s

コンテナの作成

コンテナを作成します。

ホストOSとゲストOS間でファイルを共有するためにvolumeを設定します。

    
docker run -it -v .:/var/app/ myapp bash

vueプロジェクト作成

vueプロジェクトを作成します。

プロジェクトの作成は以下のページを参考にしてください。

クイックスタート 
    
npm create vue@latest

実行結果は以下の通りです。

    
Need to install the following packages:
  create-vue@3.7.5
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … myapp-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /var/app/myapp-project...

Done. Now run:

  cd myapp-project
  npm install
  npm run format
  npm run dev

npm notice
npm notice New major version of npm available! 9.6.4 -> 10.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.1.0
npm notice Run npm install -g npm@10.1.0 to update!
npm notice

vueの初期設定

vueの初期設定をします。

    
cd myapp-project
npm install

package.jsonの修正

package.jsonを修正します。

修正前

    
  "scripts": {
    "dev": "vite",
    ・・・
  }

修正後

    
  "scripts": {
    "dev": "vite --host 0.0.0.0 --port 3000",
    ・・・
  }

vueの起動

Vueを起動します。

    
npm run dev

ブラウザで画面表示

ブラウザで画面表示します

    
http://localhost:3000

まとめ

今回はdockerfileの作成からVueの初期画面が表示できるまでの手順を紹介しました。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。