コンテナ化された展開のためにdockerでvueを使用するには、次の手順に従ってください。
VUEプロジェクトの作成:Vue.jsプロジェクトを設定することから始めます。 Vue CLIを使用するか、プロジェクトを手動で構成することができます。 Vue CLIを使用する場合は、実行してください。
<code class="bash">vue create my-vue-app cd my-vue-app</code>
Docker用のVueアプリを準備:Vueアプリが制作可能であることを確認してください。でアプリケーションを構築します:
<code class="bash">npm run build</code>
これにより、生産対応アプリケーションを含むdist
フォルダーが作成されます。
dockerfileを作成:Vueプロジェクトルートで、 Dockerfile
を作成します。 dockerfileは次のように見えるはずです:
<code class="Dockerfile"># Use an official Node runtime as a parent image FROM node:14-alpine as build-stage # Set the working directory in the container WORKDIR /app # Copy package.json and package-lock.json COPY package*.json ./ # Install dependencies RUN npm install # Copy local code to the container COPY . . # Build the application RUN npm run build # Use Nginx to serve the application FROM nginx:stable-alpine as production-stage # Copy the built app from the build stage COPY --from=build-stage /app/dist /usr/share/nginx/html # Expose port 80 EXPOSE 80 # Start Nginx CMD ["nginx", "-g", "daemon off;"]</code>
Dockerイメージを構築する:プロジェクトディレクトリから、Docker画像を作成します。
<code class="bash">docker build -t my-vue-app .</code>
Dockerコンテナを実行します。画像が構築されたら、コンテナを実行できます。
<code class="bash">docker run -p 8080:80 my-vue-app</code>
これにより、ホストマシンのポート8080をマッピングして、NginxがVueアプリを提供しているコンテナ内のポート80にマップされます。
DockerコンテナのVUEアプリケーションの最適化には、パフォーマンスを改善し、リソースの消費を削減するためのいくつかのプラクティスが含まれます。
COPY package.json
やDockerFileの先頭にRUN npm install
など、あまり頻繁に変更されない手順を配置して、キャッシュの使用を最大化します。npm run build
使用して、Vueの生産ビルド機能を活用します。worker_processes
を設定し、GZIP圧縮を有効にし、キャッシュを構成できます。node:alpine
またはnginx:alpine
画像サイズを大幅に削減できます。DockerコンテナのVUEアプリケーションの管理と更新には、次の手順が含まれます。
更新戦略:アプリケーションを更新するときは、新しいDocker画像を引いて、既存のコンテナを停止し、更新された画像を使用して新しいコンテナを起動します。単純な更新コマンドは次のようになります。
<code class="bash">docker pull my-vue-app:latest docker stop my-vue-container docker rm my-vue-container docker run -d --name my-vue-container -p 8080:80 my-vue-app:latest</code>
Dockerで実行されているVueアプリのパフォーマンスを監視するには、次のツールを検討してください。
docker stats
を提供します。これは、CPU、メモリ、およびネットワークの使用を追跡するのに役立ちます。これらのツールを活用することにより、Dockerコンテナで実行されているVUEアプリケーションのパフォーマンスを効果的に監視および最適化できます。
以上がコンテナ化された展開にDockerを使用してVueを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。