After vue is packaged, it is deployed with docker image

After the vue3 project is packaged into dist, use Dockerfile and mirror deployment. Then run it online.

I bought a lightweight server on Alibaba Cloud. The system image is centos7. Now install Docker under Linux.

For example, the dist folder I packaged must be in the same directory as the Dockerfile, otherwise the dist folder cannot be found during the build.

In fact, it is right to think about it carefully, because after the vue project is packaged into dist, a new Dockerfile file is created under the project, and I just took out the dist folder. It is wrong to create a new Dockerfile file in the dist folder.

 

1. Write Dockerfile code 

#Dockerfile

FROM nginx:1.21.0-alpine
LABEL Author dzh
COPY dist /usr/share/nginx/html

 After writing, upload the admin folder to the Alibaba Cloud server. I use Xshell and Xftp7 to connect to the server

 2. Mirror build build, enter the admin folder

cd admin

docker image build -t admin .

 The following . The guide mark represents the current folder

 Check the mirror and see that the created mirror has been successful

docker image ls

 

3. Create the container

docker container run -d --name admin -p 8888:80 admin

启动命令说明：

-d：容器后台启动

—name : 容器名称

-p 8888:80 ：将nginx容器的80端口映射到主机的8888端口，我们访问时直接访问主机ip+映射到主机的端口，这里是8888，如果有路径，后面还要带上路径。

admin: 我们刚刚创建的自己的镜像的名称

 Check that the container status is up

 Finally, enter the ip address of your own server plus port number 8888 in the browser

http://xx.xxx.x0.x7:8888/#/login

The website will be online normally.