Docker コンテナ化を使用して Vue にアプリケーションをデプロイする方法

WBOY

リリース： 2023-06-11 10:50:51

オリジナル

2363 人が閲覧しました

Docker は、最新の Web アプリケーションの開発および展開において非常に人気のあるソリューションとなっています。 Docker テクノロジーの基本的な考え方は、コンテナーテクノロジーを使用して、アプリケーション、サービス、その他のさまざまな依存関係を統合することです。これにより、複数の環境でのアプリケーションのデプロイ、テスト、保守が容易になります。同時に、Vue.js アプリケーション開発者にとって、Docker テクノロジーは、アプリケーションの迅速なデプロイと保守に役立つ、便利なコンテナ化されたデプロイメントソリューションも提供します。

この記事では、Vue.js アプリケーションをコンテナ化して Docker にデプロイする方法を紹介し、いくつかの役立つヒントとベストプラクティスを共有します。

基本概念

Vue.js アプリケーションをデプロイするために Docker コンテナ化の導入を開始する前に、いくつかの基本概念を理解する必要があります。

Docker: コンテナを使用してアプリケーションをパッケージ化、デプロイ、配布するオープンソースのコンテナ化テクノロジ。
コンテナ: アプリケーション、サービス、ランタイム環境、依存関係などを含めることができる、軽量で独立したアプリケーション実行環境。
画像: オペレーティングシステム、アプリケーション、サービス、ライブラリ、およびすべての依存関係を含む、事前構成されたコンテナ環境。
ウェアハウス: Docker イメージが保存される場所 (プライベートウェアハウスとパブリックウェアハウスを含む)。

Docker コンテナ化による Vue.js アプリケーションのデプロイメント

以下では、Docker コンテナ化を使用して Vue.js アプリケーションをデプロイする方法を詳しく紹介します。

1. Vue.js アプリケーションを作成する

まず、Vue.js アプリケーションを作成する必要があります。すでに Vue.js アプリケーションをお持ちの場合は、この手順をスキップしてください。

Vue.js は軽量で効率的な JavaScript フレームワークです。Vue.js を使用すると、インタラクティブで応答性の高いユーザーインターフェイスを簡単に構築できます。次のコマンドを使用して、Vue CLI を使用して新しい Vue.js アプリケーションを作成できます。

$ vue create my-app

ログイン後にコピー

2. Dockerfile の作成

Dockerfile は、Docker でイメージを構築する方法についての手順が含まれるテキストファイルです。以下は、Vue.js アプリケーションイメージを構築するための基本的な Dockerfile の例です。

# 基于官方的 Node.js 镜像
FROM node:14.17.0-alpine

# 设定工作目录
WORKDIR /app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 将其他文件都拷贝到/app文件夹内
COPY . .

# 编译打包
RUN npm run build

# 启动Nginx
FROM nginx

# 复制/dist文件夹到Nginx的默认文件夹
COPY --from=0 /app/dist /usr/share/nginx/html

ログイン後にコピー

3. Vue.js アプリケーションイメージをビルドする

次のコマンドを使用して Vue.js アプリケーションイメージをビルドします:

$ docker build -t my-app .

ログイン後にコピー

4. Docker コンテナーを実行します

次のコマンドを使用して、Vue.js アプリケーションコンテナを実行します。

$ docker run -p 8080:80 my-app

ログイン後にコピー

このうち -p 8080:80 は、コンテナ内のポート 80 をホストのポート 8080 にマッピングすることを意味します。

これで、ブラウザで http://localhost:8080 にアクセスして、Vue.js アプリケーションを表示できるようになります。

5. Docker Compose を使用したデプロイ

Vue.js アプリケーションが他のサービスまたはデータベースに依存している場合は、Docker Compose を使用して複数のコンテナーを一度に定義して実行できます。

以下は、Vue.js アプリケーションと MySQL データベースコンテナーを定義する単純な docker-compose.yml ファイルの例です。 docker-compose up コマンドを使用すると、サービスが開始されます。

version: '3.1'

services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: example

  frontend:
    build: .
    ports:
      - "8080:80"

ログイン後にコピー

ベストプラクティス

上記の手順に加えて、Docker コンテナ化を使用して Vue.js アプリケーションをデプロイするときに注意すべきベストプラクティスがいくつかあります。

イメージの alpine バージョンを使用します。Alpine Linux は、コンテナー環境での実行に非常に適した軽量の Linux ディストリビューションです。 Node.js イメージのアルパインバージョンを使用すると、イメージサイズを削減できます。
コンテナサイズの管理: 大きすぎるイメージの使用を避け、コンテナ内の共有ボリュームとキャッシュを管理します。
アプリケーションをコンテナから確実に分離します。ノードモジュールファイルやその他の不要なファイルをコンテナから除外し、.env ファイルまたは構成ファイルを使用して機密情報を分離します。
Docker のセキュリティを理解する: root ユーザーの使用を減らし、ネットワークポートの過剰な露出を回避するなど、Docker のセキュリティの問題とベストプラクティスを理解します。

概要

Docker テクノロジを使用すると、Vue.js アプリケーションのデプロイがより簡単かつ効率的になります。アプリケーション、サービス、依存関係を 1 つのコンテナーに組み合わせることで、アプリケーションを簡単かつ迅速に配布し、展開とメンテナンスの効率を向上させることができます。この記事で提供されるヒントとベストプラクティスが、Docker コンテナ化を使用して Vue.js アプリケーションをより適切にデプロイするのに役立つことを願っています。

以上がDocker コンテナ化を使用して Vue にアプリケーションをデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。