用docker容器在nginx上部署前端项目

用docker容器在nginx上部署前端项目，且解决跨域问题

准备工作

1、前端项目打包 ，在/home 解压，存于/home/dist内
2、后端项目跑起来

宿主机操作

新建数据卷名为nginx

docker volume create nginx

docker volume ls

docker volume inspect nginx

初始化一个叫nginx的容器，-d后台运行，-p端口映射，docker宿主机的8089端口映射到容器的80端口
-v参数 把dist下的静态文件映射到nginx的html文件夹，配置文件映射到对应的默认配置文件，把数据卷nginx绑定的主机文件夹（/var/lib/docker/volumes/nginx/_data）
映射到nginx容器的 /etc/nginx文件夹

docker run  --name nginx -d -p 8089:80  -v /home/dist:/usr/share/nginx/html -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v nginx:/etc/nginx  nginx

docker ps 查看运行的容器

进入主机挂载的文件夹

cd /var/lib/docker/volumes/nginx

cd _data/

复制静态文件夹到挂载的文件夹
cp /home/dist .

进到存放配置文件的文件夹，编辑配置文件

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

   include /etc/nginx/conf.d/*.conf;


        server{
        listen  80;
        server_name ip;

        location / {
                proxy_pass http://ip:8081/api/; #ip为你的后端ip地址
                }

        location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html)$ {
                root /etc/nginx/dist;
                expires 30d;
                }
        }


}

进入nginx容器的文件夹

/data/nginx/conf

1、docker exec -it nginx(容器名) /bin/bash

2、cd /etc/nginx

3、ls 可查看到刚刚复制的主机文件夹中的静态文件

重启nginx容器以更新配置

docker ps
docker restart XXX