通过docker创建Nginx容器并运行Vue项目（可用https进行访问）

一、先查看docker里面是否有nginx的镜像，没有直接去pull一个下来

         先查看docker里面是否有nginx的镜像，没有直接去pull一个下来
         指令：docker images （查看镜像）
              docker pull nginx （拉取Nginx镜像）

二、首先将vue项目打包成一个‘dist’文件夹

上图就是你的vue项目打包成’dist’文件后的目录列表。不清楚如何打包的兄弟可以去查一下。

三、服务器创建一个文件夹，将‘dist’本地文件复制至该路径下，并新增Dockerfile和nginx.conf文件。（见下图）

解释一下上图各项配置文件和文件夹的作用

1、'dist’文件则是你的vue项目。

2、‘cert’文件夹，里面放的是SSL证书文件，用来映射到nginx的’cert’文件中

上面的.key文件是证书秘钥
下面的.pem文件是证书文件（有的证书文件可能是以.crt为后缀）

3、‘logs’文件夹，为nginx的日志文件。

4、Dockerfile文件为创建docker镜像时所需要的配置文件，属于核心配置文件

Dockerfile文件内容如下：

#基于nginx的镜像
FROM nginx

#指定维护者信息
MAINTAINER vandy<xxxx@google.com>

#将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/dist

#挂载nginx.conf文件，在宿主机文件中配置好nginx.conf后进行映射
COPY nginx.conf /etc/nginx/nginx.conf

#挂载证书文件至nginx 'cert'文件夹
COPY cert/ /etc/nginx/cert/

#挂载日志文件
COPY logs/ /var/log/nginx/

#构建镜像时执行的命令
RUN echo 'echo init ok!!'

5、nginx.conf文件为启动nginx时所需的配置文件，属于核心配置文件

nginx.conf文件内容如下：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
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;

    upstream backend {
             server xx.xxx.xxx.xxx:8080; # 后端项目的api访问地址
    }

    # 以下属性中，以ssl开头的属性表示与证书配置有关。
    server {

        listen 443 ssl;

        # 配置HTTPS的默认访问端口为443。

        # 如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。

        # 如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。

        server_name blog.test.com; # 需要将yourdomain.com替换成证书绑定的域名。

        ssl_certificate /etc/nginx/cert/blog.test.com.pem;  # 替换自己上传的证书文件的名称。

        ssl_certificate_key /etc/nginx/cert/blog.test.com.key; # 替换成自己上传的证书密钥文件的名称。

        ssl_session_timeout 5m;

        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;

        # 表示使用的加密套件的类型。

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # 表示使用的TLS协议的类型。

        ssl_prefer_server_ciphers on;

        location / {      
            root /usr/share/nginx/dist;  # 指定dist文件挂载目录
            index index.html index.htm;            
            try_files  $uri $uri/ @router;
        }
        
        # 解决刷新浏览器时，页面重载的问题。防止页面刷新时出现404、405的问题。
        location @router {
            rewrite ^.*$ /index.html last;
        }

        # 配置访问后端接口，这一步其实就是实现了Nginx的反向代理
        # 需要注意的地方是这里配了一个地址前缀'api'，那么前端页面的对应访问地址应该就是https://blog.test.com/api/xxx/xxx
        location ^~ /api/  {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for;
            proxy_pass       http://backend/;  #这里的backend就是上面配置的后端接口的访问地址
        }
        
        # 解决登录界面刷新浏览器时无法显示页面的问题，重定向到初始化地址，让它去重新显示。
        #location /index/login {
            #proxy_pass https://blog.test.com:8081/; 
        #}
    }
    
    server {
        listen 80;
        server_name blog.test.com;      
        return 301 https://$server_name$request_uri;
        location / {
           root /usr/share/nginx/html;  #站点目录。
           index index.html index.htm;
           if (!-e $request_filename) {
        	rewrite ^(.*)$ /index.html?s=$1 last;
          	break;
            }
        }
    }
}

四、开始构建项目docker镜像

注意：需cd到‘dist’文件所在的根目录下进行操作

指令：docker build -t vue-project:1.0 .

五、创建docker容器并运行

1、分两种情况，这里我用的第一种情况

① 第一种情况，基于SSL的https格式，需要映射443端口

指令：docker run -d -p 8081:443 -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro --name project-web-vue vue-project:1.0

docker run -d -p 8081:443 -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro --name project-web-vue project-vue:1.0

② 第二种情况，基于普通的http格式，需要映射80端口

指令：docker run -d -p 8081:80 -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro --name project-web-vue vue-project:1.0

docker run -d -p 8081:80 -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro --name project-web-vue project-vue:1.0

2、需要注意的地方

上面的方式是基于https的格式进行创建的，普通http方式主要是nginx.conf配置文件不同和少了cert文件夹，也就是少了挂载SSL证书这一步，所以Dockerfile文件也要改，去掉’cert’文件夹映射即可。

3、总结

总的来说，无论使用https还是http，区别大同小异，关键点在于前者有ssl，后者无ssl。只需在nginx.conf中监听80端口，见下图：

六、查看运行结果

1、通过指令’docker ps’查看运行的容器，如果在列表中未找到运行的项目容器，则换用’docker ps -a’指令，再通过’docker logs xxxxx’（容器ID）查看日志，排查失败的原因。

2、如果运行成功，则使用浏览器进行访问
注意：端口就是创建容器时给定的端口，比如上面的端口给的是8081，所以访问的时候带的端口就是8081

最后可以看到，已成功通过https进行项目访问

结语：相信大家也很疑惑，为什么用https的格式进行访问时仍需要带端口号。很惭愧，在下技不如人，这个问题截止发稿前也仍然没有解决。若有大佬愿意指点迷津，小弟感激不尽！
最后想说的是，文章中有错误的地方或者有不严谨的地方希望大家多多包涵，同时也希望大家能及时指出，我好及时更正。