The teaching of using docker to deploy vue projects from chat-GPT

# 第一步：基于 Node.js 镜像创建一个新的镜像
FROM node:14.17.0-alpine as build

# 第二步：在容器内创建并设置一个工作目录
WORKDIR /app

# 第三步：将应用的依赖文件 package.json 和 package-lock.json 复制到容器内
COPY package*.json ./

# 第四步：使用 npm 安装依赖
RUN npm install

# 第五步：将应用程序的所有文件复制到容器内
COPY . .

# 第六步：构建 Vue 应用程序
RUN npm run build

# 第七步：从 nginx 镜像中创建一个新的镜像
FROM nginx:stable-alpine

# 第八步：将 Nginx 的配置文件复制到容器中
COPY nginx.conf /etc/nginx/nginx.conf

# 第九步：从 Node.js 镜像中复制已编译的 Vue 应用程序到 Nginx 的默认静态文件目录中
COPY --from=build /app/dist /usr/share/nginx/html

# 第十步：暴露端口 80，以便外部网络可以访问应用程序
EXPOSE 80

# 第十一步：以前台模式启动 Nginx 服务器
CMD ["nginx", "-g", "daemon off;"]

In the above Dockerfile:

In the first step, we choose a Node.js 14.17.0-alpine as the base image, and use as build to name it as a temporary image for the build phase.
In the second step, we created a working directory /app inside the container and set it as the default working directory for all subsequent steps in the container.
In the third step, we copied the package.json and package-lock.json files into the container.
In the fourth step, we install all dependencies of the application using npm.
In the fifth step, we copy all the files of the application into the container.
In the sixth step, we run the npm run build command to build the Vue application.
In the seventh step, we created a new mirror from the Nginx mirror.
In the eighth step, we copied the nginx.conf configuration file to the container, which is used to configure the Nginx server.
In step nine, we copy the compiled Vue application from the build phases to Nginx's default static files directory.
In the tenth step, we expose port 80 in the container to the external network.
In the eleventh step, we use the nginx -g "daemon off;" command to start the Nginx server. This command runs Nginx in the foreground mode, so that the container can not be shut down when it is running.

By using Dockerfile, we can easily build using Docker build tools in any Docker environment

Ps:

1. COPY in the fifth step . .

is a Dockerfile instruction to copy all files and directories in the current context into the container's current working directory. The first dot .represents the current directory in the Dockerfile context, and the second dot .represents the current working directory in the container.

This instruction is used when copying the local Vue.js application to the directory in the container , that is, to copy the files in /appthe local directory to the directory in the container../dist/app

2. COPY --from=build /app/dist /usr/share/nginx/html in the ninth step

This command is to copy the Vue.js application static files compiled in the previous step to the service directory in Nginx. Specifically:

COPYis a command in a Dockerfile to copy a local file or directory into a container.
--from=buildis to copy files from the previous stage (that is, FROM buildthe defined stage).
/app/distIt is the directory where the Vue.js application static files compiled in the previous stage are located.
/usr/share/nginx/htmlIt is the default service directory in Nginx, and the files in this directory will be served by Nginx as static files. Copy the Vue.js application static file to this directory, and then it can be served through Nginx.

Taken together, the function of this command is to copy the compiled Vue.js application static files to the service directory in Nginx, so as to deploy the Vue.js application in the Docker container.

In this Dockerfile, COPY --from=build /app/dist /usr/share/nginx/htmlthis line of command is executed in the Nginx image. buildThis command means to copy the files in the directory from the previously defined stage /app/distto the directory in the current container /usr/share/nginx/html, as the default site of the Nginx server. This relationship is defined in the Dockerfile.

We can roughly understand the process in this Dockerfile as:

In the first stage, a stage named is defined build, using the Node.js image, then copying the source code of the application to the image, and using the npm installinstallation dependencies, and finally using npm run buildthe command to package the application to generate static resource files.
In the second stage, use the Nginx image to copy the static resource files generated in the previous stage to the default site directory of Nginx /usr/share/nginx/html, and then start the Nginx server to provide services.

In this process, multiple Docker images are used as the container running environment, but in the Dockerfile, keywords such as FROMand are used COPY --fromto define the dependencies and relationships between the images, thus realizing the setting of the master-slave relationship.

3. Environment variables in the project can be set using the ENV keyword

ENV NODE_ENV=production
ENV API_URL=http://localhost:3000

It is also possible to dynamically set environment variables when starting the container, which can be set using the option docker runof the command . -efor example:

docker run -e NODE_ENV=production -e API_URL=http://localhost:3000 my-app-image

The teaching of using docker to deploy vue projects from chat-GPT

Guess you like