Linux下使用docker部署vue项目

通过nginx镜像部署

关于前端vue项目部署：

1. 使用npm打包
2. 创建 nginx 容器

   docker run -d --name admin_portal -p 9091:80 nginx
   

3. 将dist目录下的所有文件拷贝到容器的 /usr/share/nginx/html 目录下，这个是html文件的默认读取路径

   docker cp ./ admin_portal:/usr/share/nginx/html/
   

4. 修改配置文件，/etc/nginx/nginx.conf

   docker cp admin_portal:/etc/nginx/nginx.conf .
   vim nginx.conf
   docker cp nginx.conf admin_portal:/etc/nginx/
   

具体配置文件如下

nginx.conf

server {
  # 端口号
  listen 9091;
  # IP
  server_name  ${your_ip};
  # 匹配所有请求
  location / {
    # 执行目录
    root /usr/share/nginx/html;
    index index.html;
    # vue支持路由跳转 路径查找不到的话访问/index.html
    try_files  $uri $uri/ /index.html;
  }
}