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改成你自己的即可，其他的是不需要修改的。

build_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