04 使用 Docker 安装 Nginx

一、拉取镜像

docker search --limit 5 nginx

docker pull nginx

二、创建配置文件

2.1 创建挂载目录

mkdir -p /usr/docker/test/nginx/conf
mkdir -p /usr/docker/test/nginx/log
mkdir -p /usr/docker/test/nginx/html

2.2 将容器中的 nginx.conf 文件和 conf.d 文件夹复制到宿主机

启动容器：

docker run --name nginx -p 7000:80 -d nginx

将容器 nginx.conf 文件复制到宿主机：

docker cp nginx:/etc/nginx/nginx.conf /usr/docker/test/nginx/conf/nginx.conf

将容器 conf.d 文件夹下内容复制到宿主机：

docker cp nginx:/etc/nginx/conf.d /usr/docker/test/nginx/conf/conf.d

将容器中的 html 文件夹复制到宿主机：

docker cp nginx:/usr/share/nginx/html /usr/docker/test/nginx

​

删除刚刚创建的容器：

docker ps

docker rm -f 容器ID

三、启动容器

3.1 执行命令启动 nginx

docker run \
-p 7000:80 \
--name nginx \
-v /usr/docker/test/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/docker/test/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /usr/docker/test/nginx/log:/var/log/nginx \
-v /usr/docker/test/nginx/html:/usr/share/nginx/html \
-d nginx:latest

​

3.2 访问地址测试

打开浏览器，输入 ip 地址:端口号

​

四、部署静态网页

进入 nginx 的 html 路径，新建一个文件夹用来存放静态网页

cd /usr/docker/test/nginx/html

mkdir cmptest

​

将本地打包好的静态网页，通过 ftp 上传到服务器刚才创建的 html 目录下：

​

使用命令解压文件：

unzip html.zip

如果没有 unzip 命令需要安装，执行命令：

yum install -y unzip zip

安装好之后再执行解压命令：

​​

配置 nginx.conf：

vim /usr/docker/test/nginx/conf/nginx.conf

直接输入 ggdG 删除文件所有内容，然后复制下面的内容进去：

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  填服务器IP地址;
        charset utf-8;
        gzip_static on;
        location / {
            root   /usr/share/nginx/html/cmptest;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;前面填写vue.config.js配置的后端路径
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 16 64K;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

重启 nginx：

docker restart 容器ID

问题：

1. 解决若依服务器部署后页面加载不出来

问题描述：若依项目本地运行没有问题，部署到服务器以后点击菜单切换路由，一直处于加载状态，打开控制台，发现报错 Error: Cannot find module ‘@/views/xxx‘。

原因：路由懒加载，webpack 版本问题，webpack4 不支持变量方式的动态 import ，新版本需要使用 require() 来解决此问题。

解决办法：第一个地方，store/modules/permission.js。语法：return (resolve) => require([@/views/${view}​], resolve)

​

第二个地方，router/index.js。

‍