前后端分离项目如何部署到服务器

前言

        前年部署过到服务器，但是时间太久忘记了，最近因为毕设要求，操作了好久，看网上教程也踩了很多的坑，所以打算自己写一篇笔记，也给同学们一个参考。

实操开始

        前后端分离是一种现代Web开发架构，它将前端（用户界面）和后端（服务器逻辑和数据处理）分离开来，使得两者可以独立开发、测试和部署。

        我们可以使用云服务器或者虚拟机来部署服务，本项目使用阿里云服务器演示

后端部署

        首先我们需要修改一下yml配置文件，把MySQL、Redis修改为服务器上的端口和密码

        设置好端口避免与其他服务冲突

        之后我们就可以打jar包了，先执行maven的clean插件，然后再执行install

        我们就能在目录下看到两个jar包，我们选第一个

        之后我们把对应的jar包，上传到我们的服务器上面，我这边是直接使用阿里云的文件上传工具，你们可以使用MobaXterm等开源的软件

        因为我们的服务需要有Java和MySQL及Redis的环境 ，我这边MySQL和Redis使用docker镜像的形式

拉取MySQL镜像：
docker pull mysql:latest
拉取Redis镜像：
docker pull redis:latest

启动容器：
docker run –name mysql-container -e MYSQL_ROOT_PASSWORD=my-secret-pw -e MYSQL_DATABASE=mydatabase -e MYSQL_USER=myuser -e MYSQL_PASSWORD=mypassword -p 3306:3306 -d mysql:latest
docker run –name redis-container -p 6379:6379 -d redis:latest

        上传到服务器之后，我们使用下面的命令在后台执行

nohup java -jar yuanan-admin.jar > yuanan.log 2>&1 &
#命令解释
nohup：
使用nohup可以确保即使你关闭终端，Java应用程序仍然会继续运行。

java -jar yuanan-admin.jar：
java是Java的命令行工具，用于运行Java应用程序。
-jar选项表示运行一个JAR文件。
yuanan-admin.jar是要运行的JAR文件的名称。

> yuanan.log：
>是输出重定向符号，用于将标准输出（stdout）重定向到指定的文件。
yuanan.log是重定向的目标文件名，表示将标准输出写入到yuanan.log文件中。

2>&1：
2>是错误输出重定向符号，用于将标准错误输出（stderr）重定向到指定的目标。
&1表示将标准错误输出重定向到标准输出（stdout），即将错误信息也写入到yuanan.log文件中。

&：
&符号用于将命令放入后台执行，使得终端可以立即返回并继续接受其他命令。
使用&可以在后台运行Java应用程序，而不阻塞当前终端。

前端打包

要在vite.config.js文件配置好对应的端口和后端访问地址

然后我们使用npm run build:prod 打包，然后就能生成dist文件

然后我们把整个dist文件传输到服务器，可以先将其打包成zip，然后到服务器再使用命令解压

sudo yum install unzip
unzip 文件名.zip

Nginx

        这个步骤是最容易出错的部分，我们使用docker先下载和启动nginx镜像，要记得在安全组开发89端口

docker run -d –name mynginx -p 89:80 nginx
-d后台启动，–name 给该容器取一个名称 -p 服务器端口:容器内端口

        然后我们将dist文件拷贝到容器内部，使用命令

docker cp dist mynginx:/usr/share/nginx

        然后进入容器

docker exec -it 容器名 /bin/bash

        修改nginx的配置文件，包括两个部分，一个是/etc/nginx/nginx.conf

user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;

events {
worker_connections 1024;
}

http {
include /etc/nginx/mime.types;
default_type application/octet-stream;

log_format main '$remote_addr – $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log /var/log/nginx/access.log main;

sendfile on;

include /etc/nginx/conf.d/*.conf;
keepalive_timeout 300;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;

server {
listen 80; # 前端打包时，选的端口
server_name 8.130.x.x; # 服务器的ip地址

location / {
root /usr/share/nginx/dist; # 存放前端静态文件的路径
index index.html index.htm;
try_files $uri $uri/ /index.html; # 读取的首页
}
location /prod-api/ {
proxy_pass http://8.130.x.x:8848/; #后端的ip和端口
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /usr/share/nginx/ {
alias /usr/share/nginx/;
}
}
}

        然后配置/etc/nginx/conf.d/default.conf文件

server {
listen 80;
listen [::]:80;
server_name localhost;

location / {
root /usr/share/nginx/dist;
index index.html index.htm;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/dist;
}

}

        更新了配置文件之后要记得检查和刷新配置

nginx -t #校验是否有错误
nginx -s reload #刷新配置

然后我们就可以在服务器访问系统了！