本次我们说说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部署文件包,将其整理出,其他项目都可复用,这样会提高部署的速度及效率。

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

Logo

前往低代码交流专区

更多推荐