docker+nginx部署vue的dist

docker+nginx
对于常用的nginx部署项目的话，一般都由反向代理进行配置负载均衡，静态文件也是走的nginx。但是部署前后端分离开发的项目时,对于前端界面的访问，路由用的则是nginx进行转发，但是前后端的项目时不同的，走的接口就可能属于跨域的请求（这是我遇到的坑）

1、拉镜像：docker pull nginx

其实也是比较简单的，主要的就是复制当前vue打包好的dist复制进去，还有nginx配置。

2、编写nginx配置

主要的就是替换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 / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    #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;
   # }
    location /api/ {  # 匹配api接口，进行转发配置
        rewrite  /api/(.*)  /$1  break;
        proxy_pass http://45.647.88.99:8000;  #这是重点，转发到你的后端接口
    }

}

3、编写dockerfile

# 设置基础镜像
FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

4、本项目本件夹

图片.png

default.conf在nginx中

5、制作镜像

docker build -t test:2 .

6、启动镜像

docker run --name=test3 -p 9002:80 -d test:2

小结：

我个人遇到的问题就是跨域请求的转发问题，后来才找到nginx还可以这样高。这里只是简单的写了下。工作开大可能还需要改动。比如nginx镜像最好是只用挂载的方式进行启动，这样的话对于nginx/defaulu.conf的配置更新还是比较方便的。