vue项目部署步骤（docker+nginx)

最新推荐文章于 2024-09-06 15:37:04 发布

原创最新推荐文章于 2024-09-06 15:37:04 发布 · 置顶 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#docker #vue.js #nginx

vue爬坑之旅专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何使用Docker部署Vue.js项目，包括Docker安装、解决运行问题、配置dist文件、创建Dockerfile及default.conf文件、编译运行镜像、容器操作指令等关键步骤。

1、安装docker

网上的步骤基本都可以用：https://blog.youkuaiyun.com/jinking01/article/details/82490688

2、docker安装后sudo docker run helloworld 出现超时现象

解决方法：https://blog.youkuaiyun.com/wangtaoking1/article/details/49126621

3、配置dist文件

将vue打包好的dist文件夹里创建Dockerfile。写入内容：

# 设置基础镜像 
FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY /  /usr/share/nginx/html/
# 使用dist文件中的nginx配置文件，覆盖nginx镜像中的配置文件
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

nginx文件夹里创建default.conf文件。写入内容：（记得修改自己的后端地址）

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    # 配置首页路径
    location / {
        add_header Kss-Upstream $upstream_addr;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    # 配置后端访问路由，名称包含dev-api的请求全部重定向至 http://120.77.179.239:8083/ 这个ip
   location ^~ /dev-api/ {
      add_header Kss-Upstream $upstream_addr;
      rewrite  /dev-api/(.*)  /$1  break;
      proxy_pass http://120.77.179.239:8083/;
   }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    
}

5、将dist发送至服务器任意位置。进入dist根目录。运行docker编译命令:

docker build -t cloud-system . && docker run -p 1234:80 -d --name cloud cloud-system

（命令释义：）

# 根据文件夹中的Dockerfile打包成一个镜像，镜像名字为ship-system
docker build -t ship-system . 
# 基于编译好的ship-system镜像，启动一个名字为my-ship的容器，并暴露于系统的80端口
# 80:80，前一个为宿主机地址，后一个为容器内部端口
docker run -p 80:80 -d --name my-ship ship-system

（停止并删除容器方法：）

docker stop my-ship && docker rm my-ship

6、然后运行主机地址:端口（上图是1234）即可

7、若想重新部署：

（1）停容器: 先查容器ID再把ID放在stop后面

sudo docker ps

sudo docker container stop 304811d71368

（2) 删容器：先查容器ID再把ID放在rm后面

sudo docker ps -a

sudo docker container rm 304811d71368

（3）删镜像：先查镜像ID再把ID放到rm后面

sudo docker image ls

sudo docker image rm 05b0c1acd399

重复步骤3-6即可。

其它各种容器指令参照链接：https://www.jianshu.com/p/bc08d38095bc