Linux下将vue打包成docker部署在NGINX中 图文最全

首先我们需要准备好一个vue项目，一个Linux服务器，Linux服务器上需要安装docker（安装教程我就不多说了），这些准备好之后就来跟着步骤试一下吧

一、打包vue项目

首先我们又这样一个项目，在该项目的路径中run build一下，打包成一个dist文件

这时，我们可以看到目中多出了一个dist文件，这就是打包好后的项目文件。

二、配置docker本地打包工具

先将docker放到我们的配置环境中

我来为大家介绍一下里面的内容

Dockerfile文件

//生成镜像所需的nginx基础镜像
FROM nginx:latest
//瞎填即可
MAINTAINER GnayEy <a2417978181@163.com>
//指定一个conf文件用于替换掉默认的nginx中conf文件，*******而且必须在**/conf.d/文件夹下******重点
RUN rm /etc/nginx/conf.d/default.conf
ADD conf.d/default.conf /etc/nginx/conf.d/
//复制项目到nginx配置文件配置的访问目录，dist/是上图中所示项目打成的包，
//注意：后面这个目录直接在Linux建一个空目录即可
COPY dist/  /usr/share/nginx/snnu_ui/

default.conf

注意：下面文件内容中的注释需要在正式部署时删除，nginx不会自动过滤//注释

server {
    listen       8080; //这里使用项目中的端口号            △
    server_name  *******;//这里是服务器Ip，也就是你Linux地址                △

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

    location / {
        root   /usr/share/nginx/snnu_ui;//这里配置访问项目所在的目录（Dockerfile文件中创建的空目录）
        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;
    #}
}

各位同学看着是不是有点头痛，其实你只需要将最上方的两个带△的修改成你自己的，有后台的话将后台API改成你自己的即可，其他的是不需要修改的。

buile_image.sh

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

镜像版本号，直接复制即可

run_ui_docker.sh

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

启动脚本，对Linux比较熟知的同学应该知道，Windows上创建的.sh文件是在Linux上没有权限无法正常运行的，这个我们可以使用sh命令来执行或者在Linux上赋予权限，这里我们用sh命令：

sh ./run_ui_docker.sh

之前有个地方忘记说了，我们在打包vue项目时，配置文件config中的请求指定路径要写成即将部署到的Linux服务器域名或IP，否则反向代理无法完成
这个路径写法有很多不同的，我列举两个，其他的要各位根据自己的项目来定，修改这个路径为IP即可

三、利用工具将打包镜像环境上传到Linux服务器

这里我们要上传的是
run_ui_docker.sh文件中写的/opt/snnu_docker_ui
不能随便瞎传哦

Dockerfile文件文件中最后指定的那个复制路径不要忘记创建了

四、启动

进入/opt/snnu_docker_ui文件夹，执行build_image.sh文件

我们用的是
# sh ./build_image.sh指令

此时，我们可以查看打包好的镜像

# docker images

启动镜像

# sh ./run_ui_docker.sh

浏览器请求即可

注意：网络安全组和防火墙记得打开

项目演示地址（没准哪天我整别的就停了，随缘进入吧）：点此进入
演示前端GitHub项目地址：点此进入
喜欢的同学给个点赞鼓励一下吧，Thanks♪(･ω･)ﾉ

转载：https://blog.csdn.net/jxysgzs/article/details/105864442