uni-app如何打包成web应用并部署到docker中？

uni-app如何部署到docker中？

uni-app如何部署到docker nginx容器中？

前言

• 为了满足微信公众号跳转到本应用到网页版的指定页面，这里提供了本地打包web并部署在docker容器中的脚本，当需要调试指定链接时，可通过带参数的url模拟公众号跳转的效果，这一步也是避免一些问题在正式发布后才暴露出来（nginx.conf作了接口反向代理解决CORS问题）

• • 注意：nginx.conf 中配置了代理接口的地址，若工程中的接口 BaseUrl 有变化，这里记得也要更改

• 前提说明：

• • 下载安装 docker 工具
• • 运行docker脚本说明：先在 HBuilderX 中点击“发行”，并点击菜单“网站-PC Web或手机H5”，等待编译输出包，最终输出目录为 /unpackage/dist/build/h5
• • h5 打包完成后，使用以下指令便可在本地docker中部署网站了

# 在当前工程目录下，终端中执行以下指令
# 创建镜像
docker build -t my-nginx:v1 .
# 创建容器
docker run -d --name my_nginx_container -p 8180:80 my-nginx:v1
# 容器创建成功后，可通过 localhost:8180 访问网站了

# 若想更新容器，最粗暴的方式就是移除容器和镜像，然后再重复上面的步骤
# 移除容器和镜像指令
docker rm my_nginx_container
docker rmi my_nginx:v1

源码在此！

• 在工程目录下新建两个文件：nginx.conf 和 dockerfile
• nginx.conf

# nginx.conf
server {
    listen 80;
    server_name localhost;

    location /api/ {
        proxy_pass http://改成你的接口地址:改成你的接口地址的端口号; # 比如：http://xxx.api.com:8080
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

• dockerfile

FROM nginx

# 拷贝web应用目录到容器目录
COPY /unpackage/dist/build/h5 /usr/share/nginx/html

# 拷贝自定义配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

# 创建镜像和容器指令
# docker build -t my-nginx:v1 .
# docker run -d --name my_nginx_container -p 8180:80 my-nginx:v1

# 移除容器和镜像指令
# docker rm my_nginx_container
# docker rmi my_nginx:v1