前后端项目部署到云服务器总结

项目介绍

最近正在做一个关于线上刷题的社区，目前已经将题目模块，权限模块，oss模块以及微信登录验证模块基本完成，整个项目采用gateway网关来处理所有请求，网关根据设置好的路由规则来转发请求，并且鉴定权限的逻辑也放在网关层。今天打算先把这一部分的前后端都部署到云服务器上，中间也是遇到了一些问题，不过最终都得到了解决。

前端部署

因为今天是第一次部署这个项目，所以域名还没有准备好，所以目前打算通过ip地址加端口号的方式来访问，linux中我们需要准备好nginx，这个由docker进行管理。首先，我们需要将我们的前端项目在本地打包好，命令是npm run build，成功之后会在当前项目下生成一个dist文件夹，这里存放着前端项目的静态资源。

上图是我们在vscode中运行npm run build之后等待片刻的成功结果，dist文件默认在当前的前端项目下面。我们将这个dist文件通过xshell的文件传输功能传到云服务器上，我们放在/usr/share/nginx/html这个目录下，没有的话可以使用mkdir命令创建一下，位置无所谓，主要是后续的nginx配置文件中的地址要写对。紧接着，我们使用docker来管理nginx，这里使用nginx 1.12.2，所以输入命令docker pull nginx:1.12.2拉取镜像。然后考虑到万一docker被删了，数据也会随之消失的问题，我们做了数据挂载，我们在根目录下创建两个文件夹，分别是/data/nginx/conf，/data/nginx/logs，命令是mkdir -p /data/nginx/conf和mkdir -p /data/nginx/logs。然后我们来配置nginx配置文件，在/data/nginx/conf中创建nginx.conf文件，命令是touch nginx.conf，然后输入如下内容（根据我们的项目架构来配置的）：

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/json;
 
    sendfile        on;
    
    keepalive_timeout  65;
 
    server {
        #前端项目端口 指定为所需要的端口 这里前端项目使用的是5173端口
        listen       5173;
        # 指定前端项目所在的位置
        location / {
        #nginx挂载目录 dist为打包后的前端项目 如果名字不一致则需要修改dist为实际打包后的名字
            root /usr/share/nginx/html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /auth/{
            proxy_pass http://服务器ip地址:端口号;//此为统一处理请求的网关地址
        }
        location /oss/{
            proxy_pass http://服务器ip地址:端口号;//此为统一处理请求的网关地址
        }
        location /subject/{
            proxy_pass http://服务器ip地址:端口号;//此为统一处理请求的网关地址
        }

    }
}

这里我来说一下我遇到的问题，因为我的项目所有的请求都会走gateway网关校验，所以之前借鉴的网上的都不管用，比如文件中的最后三个location，加上它们因为我们项目中目前有三个微服务要走网关，而其他的资料只写一个可能是没有是用网关，或者使用了网关并且配置了网关的前缀路径，而我们没有配置，所以需要额外配置三个微服务的路径并且将proxy_pass地址都指向网关地址。配置到这里，我们就可以来启动nginx并将数据挂载到云服务器本地了，命令如下：

docker run -d --name nginx -p 5173:5173 -v /data/nginx/html:/usr/share/nginx/html -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx/logs:/var/log/nginx nginx:1.12.2

接下来我们从windows本地来访问一下我们的前端，结果如下：

 

可以看到前端已经能够正常显示，接下来是后端的部署。

后端部署

我们的后端项目采用idea开发，目前一共五个微服务，我们在idea面板的右侧maven选项中找打clean，先clean一下再install，这样可以得到对应的jar包。如下所示：

生成的jar包在target文件夹下。我们将所有的jar包都上传到对应的云服务器，并且后台启动，这边我们也做了数据挂载，用于监控微服务的运行情况，后续想法是和skyWalking做结合，目前是开发阶段，先做一个上线demo。后台启动并且输出日志的命令如下：

nohup java -jar jc-club-auth-starter.jar > jc-club-auth-starter.file 2>&1 &

具体参数的含义可以参考nohup的使用。这样我们的后端项目和前端项目就在云服务器部署完成了，我们就可以正常地从前端向后端发出请求并渲染出来了。这边我直接使用的是本地打包的方式，如果想要使用jenkins打包的话，可以查看我的上一篇博客，是关于jenkins构建部署的，这边没有使用这个方式，主要是微服务多起来了，然后云服务器的内存不够，启动jenkins比较占用内存，所以这边采用了本地打包上传的方式，如果对jenkins构建部署感兴趣的小伙伴也可以使用jenkins来构建部署。

总结

由于之前做的更多的是后端，如果有前端也是在本地上运行，这次正好需要上线部署到云服务器就部署了一下，关于nginx配置这块还是要非常细心的，不同的项目架构对应着不同的配置，如果是只有一个服务那location自然也不会出问题，但是现在的开发项目基本山是微服务形式的，而且所有的请求都会经过gateway，而有时候gateway可能不会去配置前缀路径，所以这时候需要将所有的微服务前缀路径写出然后映射到gateway的地址，这也算是一个小点吧，不注意的话请求不能正确到达对应的微服务。最后如果大家有什么疑问或者建议，欢迎评论区留言！！！