Linux下Docker+Nginx+Vue部署前端项目

本次我们说说Linux环境下通过Docker+Nginx打包部署一个Vue前端项目

先介绍以下部署思路：
1.vue项目打包，我们需要准备相应的部署文件及nginx配置文件，
2.执行部署文件生成镜像；
3.运行镜像并对外映射端口。

接下来需要准备一些Docker部署相关文件，这里是重点 如图：

下面是具体的介绍
一 . 先从Dockerfile文件说起，内容如下：

//生成镜像所需的nginx基础镜像
FROM nginx:latest
//作者名称<邮箱>
MAINTAINER GnayEy <gnayey@163.com>
//删除nginx的默认配置，这里也可以不删除，但必须创建一个以.conf为后缀的配置文件，而且必须在**/conf.d/文件夹下
RUN rm /etc/nginx/conf.d/default.conf
//添加自己创建的**.conf配置文件到nginx默认的配置文件路径下，conf.d/default.conf为需要创建的文件及路径，也就是上图中的第一个文件夹
ADD conf.d/default.conf /etc/nginx/conf.d/
//复制项目到nginx配置文件配置的访问目录，dist/是上图中所示项目打成的包，/usr/share/nginx/snnu_ui/为配置文件所填的访问目录
COPY dist/  /usr/share/nginx/snnu_ui/

二 . 下面是default.conf文件的内容及说明，注：文中所有“//”注释符，在复制成文件后必须删掉，否则Nginx会不认识而报错

server {
     
    listen       9527; //这里使用项目中的端口号
    server_name  localhost;//这里是服务器Ip

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

    location / {
     
        root   /usr/share/nginx/snnu_ui;//这里配置访问项目所在的目录
        index  index.html index.htm;
    }

	#后台pai
	location /v1{
     
					proxy_pass  http://10.0.0.39:8089/v1;//这里配置访问的后台接口地址
	}
	location /v2{
     
					proxy_pass  http://10.0.0.39:8080/;//也可以配置多个
	}
	location /v3{
     
					proxy_pass  http://10.0.0.39:8082/v1;
	}
	
    #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   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;
    #}
}

这个配置文件内容只需要一个server{},内容及注释都很详细。需要注意的是(曾经遇到的一个坑)，我们用Nginx反向代理调用后台接口时，需要理解反向代理的含义(具体百度)，总之，在Vue项目打包之前，需要把Vue项目中配置的BASE_API：""内容一定要写成Vue项目所布署的服务器IP，或者服务器IP被指向的域名，否则无法实现反向代理。

三 . 下面是buile_image.sh文件
注：所有.sh文件需要在linux系统内创建和编辑

#!/bin/bash
sudo docker build ./ -t=snnu_ui:v0.1.1

-t = 镜像名称:版本号

四 . 下面是最后一个文件run_ui_docker.sh

#!/bin/bash
docker run -d --name snnu_ui-v.1 --restart=always \
 -p 9527:9527 \
 -v /opt/snnu_docker_ui/dist/:/usr/share/nginx/snnu_ui/ \
 snnu_ui:v0.1.1

-d 意思是后台运行容器
–name 后面跟的是容器名称
–restart=always 代表当 Docker 重启时，容器能够自动启动
-p 端口映射，冒号左边是.conf文件中配置的,冒号右边是要对外映射的端口
-v 将Docker内部目录映射到宿主机的目录，就可以共享宿主机的文件目录，冒号左边是宿主机的目录
这里是为了灵活配置项目部署，如果这里加了就可以不用在Dockerfile文件中COPY dist/ /usr/share/nginx/snnu_ui/，只需要每次将打成的包放到宿主机的对应目录下，容器会自动识别，可以不必每次更新包都需要重新生成镜像。如果不加的话，就需要在Dockerfile文件中COPY dist/ /usr/share/nginx/snnu_ui/，每次重新打包都需要重新生成镜像。
最后一行snnu_ui:v0.1.1是刚刚生成的镜像名称:版本号

所有文件准备完后，开始部署
先将所有文件放到Linux中，我是放在/opt/snnu_docker_ui文件夹下
执行命令先进入/opt/snnu_docker_ui文件夹，执行build_image.sh

如果你的Linux没有nginx镜像，初次会先自动下载nginx镜像，执行成功后查看镜像：docker images

这里已经生成了我要的镜像名称后面TAG是指定的镜像版本
最后一步：执行命令 ./run_ui_docker.sh

如同出现一长串字符，代表容器运行成功，先别着急，我们需要执行disker ps 查看确认

如图，运行的容器PORTS有端口出现，一般表示已经成功了
最后在浏览器中访问ip:端口，则可打开项目界面。

总结： Docker部署项目的思路基本是一致的，只要配置好相应的文件，按照正确的步骤执行，都是没有问题的。其实Docker部署还有很多坑需要去总结，我们可以创建Docker部署文件包，将其整理出，其他项目都可复用，这样会提高部署的速度及效率。

以上是本人自己总结的一些部署经验，希望大佬可以给出指点意见