docker部署vue+nginx

1. 安装nginx

docker pull nginx

2. 将Vue项目打包

npm run build

3. 将dist文件夹上传到服务器上，并且编写Dockerfile文件

修改nginx.conf 配置文件

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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  localhost;
		location /cyApi/ {
            rewrite ^/cyApi/(.*)$ /$1 break;
            # API Server
            proxy_pass http://接口服务器IP:接口端口/cy/;
        }
    }
}

编写Dockerfile（dockerfile文件放在dist同级目录下面）

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM nginx
# 定义作者
MAINTAINER yudachi
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf

4. 生成镜像

docker build -t 镜像名 .

5. 启动镜像

docker run -di --name xxx -p 前端访问接口:80 镜像名

6. 其他问题及解决方案

我遇到的问题是修改完nginx.conf之后，在访问后端接口的时候，还是走的

 location / {
 	root /usr/share/nginx/html/;
 	xxx
 }

表现为利用 docker logs 容器ID 查询日志的时候会报如下错误

/usr/share/nginx/html/前端请求URL 404 报错

这个时候发现我们修改之后的nginx.conf中是没有这个映射的，但是配置的时候配置了

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

这个时候是引入了一个default.conf的，因此我们还需要修改default.conf。
先将容器中的配置文件拷贝出来

docker cp 容器ID:/etc/nginx/conf.d/default.conf .

修改default.conf

vi default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location ^~/cyApi/ {
        proxy_pass http://接口服务器IP:接口端口/cy/;
    }

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

    #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;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

然后将修改之后的default.conf保存到Docker容器中

docker cp default.conf 容器ID:/etc/nginx/conf.d/default.conf

最后重启容器即可解决