七、使用Docker部署Vue

Nginx是一个高性能的HTTP服务器和反向代理服务器，由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，第一个公开版本0.1.0发布于2004年10月4日。

Nginx特点是占有内存少，并发能力强，事实上Nginx的并发能力在同类型的网页服务器中表现较好。Nginx专为性能优化而开发，性能是其最重要的关注点，官方测试Nginx能够支持5万并发连接，并且CPU、内存等资源消耗却非常低，运行非常稳定。中国大陆使用nginx网站用户有百度、京东、新浪、网易、腾讯、淘宝等。

Nginx主要应用场景：

1、HTTP服务器。Nginx可以独立提供http服务，也可以做网页静态服务器。

2、虚拟主机。可以实现在一台服务器虚拟出多个网站，例如个人网站使用的虚拟机。

3、反向代理/负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用nginx做反向代理。并且多台服务器可以平均分担负载，不会导致某些服务器负载高宕机而某些服务器闲置的情况。

4、动静分离。为了加快网站的解析速度，可以把动态页面和静态页面由不同的服务器来解析，降低原来单个服务器的压力。

2、安装Nginx

（1）安装Nginx镜像

docker pull nginx

（2）Nginx配置文件

Nginx首先加载一个主配置文件nginx.conf，在nginx.conf里再加载conf.d目录下的子配置文件，通常至少有一个default.conf文件。

1、运行一个Nginx容器。

docker run -d --name first_nginx -p 9090:80 nginx

2、使用这个容器的名字，通过exec命令进入到容器的交互命令行。

docker exec -it first_nginx /bin/bash

3、查找配置文件nginx.conf的位置。

find / -name "*nginx.conf*"

4、输出nginx.conf的文件内容。

cat nginx.conf

可以看到下面的配置，也就是加载conf.d目录下的子配置文件。

http {

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

}

5、查看conf.d目录中default.conf的文件内容。

cat default.conf

6、我们分析default.conf中的配置内容。

一个server代表一个虚拟主机。listen是虚拟主机的侦听端口。server_name是外部访问的域名或IP，这里要设置为Docker宿主机的IP地址。

location块是基于请求字符串，对虚拟主机名称之外的字符串进行匹配，还可以配置对特定请求进行处理，如地址重定向、数据缓存和应答控制等功能。

server {

    listen       80;                         # 端口号

    listen  [::]:80;

    server_name  localhost;             # 域名或IP地址

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

    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;

    #}

}

3、Vue项目打包

（1）准备工作

Edu项目中还有一些类型问题，在项目打包时会报错，需要进行修改。

1、在/src/views/login.vue中改写红颜色代码，否则编译有错。

        // 向后端发起登录请求

        login(userForm.user)

          .then((map: any) => {

          .catch((err: any) => {

          });

2、在tsconfig.json中配置跳过Node模块的检测。

{

  "compilerOptions": {

    ......

    "paths": {

      // 根据别名配置相关路径

      "@": [

        "./src"

      ],

      "@components": [

        "./src/components"

      ]

    },

    "skipLibCheck": true,

  },

  "include": [

    "src/**/*.ts",

    "src/**/*.d.ts",

    "src/**/*.tsx",

    "src/**/*.vue"

  ]

}

（2）创建default.conf

在Vue项目的根目录下创建一个配置文件default.conf，用于替代Nginx的默认配置，其中写入如下内容：

server {

    listen       80;

    server_name  192.168.0.106;   # 修改为docker服务宿主机的ip

    location / {

        root   /usr/share/nginx/html;

        index  index.html index.htm;

    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

        root   html;

    }

}

该配置文件定义了首页为/usr/share/nginx/html/index.html，项目部署时可以把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

（3）创建Dockerfile文件

在Vue项目的根目录下创建Dockerfile文件，写入下面内容

FROM nginx

MAINTAINER climbcloud

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

说明：

FROM nginx：基于nginx:latest镜像构建

MAINTAINER climbcloud：添加作者说明

RUN rm /etc/nginx/conf.d/default.conf：删除镜像中的default.conf文件

ADD default.conf /etc/nginx/conf.d/：将Vue项目的default.conf复制到/etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/：将Vue项目的dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下。

（4）编译Vue项目

在Vue项目的根目录下执行下面构建命令（和package.json文件同级）。

npm run build

执行结束之后会在项目根目录下生成一个dist的文件夹。

（5）构建docker镜像

1、将Vue项目传送到Docker宿主机中。

2、在edu-vue-app目录中，使用构建命令创建Docker镜像

docker build -t vue-edu .

注意：

不要少了最后的“.”(点)

-t是给镜像命名，.(点)表示基于当前目录的Dockerfile来构建镜像

（6）查看本地镜像

docker images | grep vue-edu

vue应用镜像已经创建成功，接下来基于该镜像启动一个docker容器

（7）启动docker容器

1、启动Docker容器

docker run -d -p 9090:80 --name edu vue-edu

docker run：基于镜像启动一个容器

-d：后台方式启动

-p 9090:80: 端口映射，将宿主机的9090端口映射到容器的80端口

--name：容器名，我起的叫mms

zz-mms：要启动的镜像名称

2、查看启动的容器

docker ps

（8）访问

现在已经启动了，访问“宿主机的地址:9090”，就可以看到部署的网站了。

4、跨域访问

1、如果在其它服务器上部署后端服务，就会有跨域问题。我们需要在default.conf中添加一个到后端服务的反向代理，然后重新构建docker镜像并启动容器。可以参考一下配置：

server {
    listen       80;
    server_name  192.168.0.10;
    client_max_body_size 1024M; # 解决大文件出现跨域问题

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ @router;  # 刷新页面防止404找不到页面
        index  index.html index.htm;
    }
    location @router {    # 刷新页面防止404找不到页面
            rewrite ^.*$ /index.html last;
        }
        location /products {
                     proxy_pass http://192.168.0.10:57021/products;
                     proxy_set_header X-Real-IP $remote_addr;
                     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                     proxy_set_header Host $host;
                     proxy_set_header X-NginX-Proxy true;
                     proxy_set_header CAPTCHA_TOKEN $http_captcha_token;
                     proxy_set_header Authorization $http_authorization;
                     proxy_connect_timeout 300;
                     proxy_send_timeout 300;
                     proxy_read_timeout 300s;
                }
        location /orders {
                           proxy_pass http://192.168.0.10:57022/orders;
                           proxy_set_header X-Real-IP $remote_addr;
                           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                           proxy_set_header Host $host;
                           proxy_set_header X-NginX-Proxy true;
                           proxy_set_header CAPTCHA_TOKEN $http_captcha_token;
                           proxy_set_header Authorization $http_authorization;
                           proxy_connect_timeout 300;
                           proxy_send_timeout 300;
                           proxy_read_timeout 300s;
                        }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}

5、最终部署结构