前端vue+docker打包发布

一. Vue生成

1. 初始化工程

选择一个文件夹

npm init vue@latest

然后

roject name: … <your-project-name>
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

2. 编译出包

npm run build

此时会有一个dist文件夹，里面是编译出来的包

3. 本地调试

npm run dev

二. Docker打包

思路是本地用nginx包装让外部可以来调用，开放9030端口

1. 建立cms文件夹，同时

dist丢进去，然后建立Dockerfile和nginx.conf

Dockerfile

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER tomxiang
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

EXPOSE 80

nginfx.conf

worker_processes auto;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
     } 
}

2. 打包镜像以及跑容器

docker build -t vue:1.0 -f Dockerfile .
docker run --name=vue_1.0 -d -p 9030:80 vue:1.0

三. 配置自己的nginx

这里的nginx是开放对外80端口，用来反向代理出最后的容器

docker exec -it 682987294b1a /bin/bash
cd /etc/nginx/conf.d/
vim default.conf

location /中配置的是vue1.0容器的ip

docker inspect 7f8fedfce19e

这里⚠️Gateway一样才能够填写到location，否则启动docker的时候要加上--link操作

四. 打开网页

http://www.engineer-club.cn/

http://119.45.4.173:9030/

两者表现一样, 大功告成

五. 常见问题

1. 我本地开的是8081端口，不起作用

原因：本地要开放80端口，因为cms中的nginx.conf配置的

    server {
        listen       80;

调试的时候可以进入容器中看到

apt-get update
apt-get install net-tools
netstat -an

80端口被监听，8081无效

原文地址：https://cloud.tencent.com/developer/article/2108587