前后端部署架构功能点前后端项目

转载

jkfox 2024-06-26 17:01:14

文章标签 前后端部署架构功能点 centos docker java nginx 文章分类 架构后端开发

项目部署

环境：CentOS 7.6

原生部署

前端

安装web服务器（nginx）

步骤：下载解压，编译，添加环境变量，启动，查看启动情况
https://nginx.org/en/download.html // 下载地址

curl -o nginx-1.24.0.tar.gz https://nginx.org/download/nginx-1.24.0.tar.gz // 下载命令
tar -zxvf nginx-1.24.0.tar.gz // 解压
yum install pcre pcre-devel -y 
yum install openssl openssl-devel -y
./configure --with-http_ssl_module --with-http_v2_module --with-stream
make // 编译
make install
vim /etc/profile // 修改环境变量
export PATH=$PATH:/usr/local/nginx/sbin	// 最后一行添加
nginx // 启动
netstat -ntlp // 查看启动情况

前端项目下载

将项目build后生成的dist文件打成dist.zip，上传到linux服务器中
修改nginx的配置文件

unzip dist.zip -d frontend // 解压项目
cd /usr/local/nginx/conf // 切换到配置文件目录
cp nginx.conf nginx.conf.default // 备份
vim nginx.conf // 编辑配置文件
将第一行user nobody改为user root
80端口对应的location中root改为前端项目的地址如/root/../...
nginx -s reload // 修改好后在conf目录下重新加载一下配置文件

后端

安装java

yum -y list java*命令可以看到能直接安装的jdk，若可以直接安装如java 1.8，使用下面这个命令即可，会自动帮你配好环境变量yum install -y java-1.8.0-openjdk*
若没有发现需要的jdk如java 17,可以从官网下载

下载地址：https://www.oracle.com/java/technologies/downloads/这里使用的是x64 RPM Package

curl -o jdk-17_linux-x64_bin.rpm https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.rpm // 从官网下载jdk17
sudo rpm -ivh jdk-17_linux-x64_bin.rpm //之后jdk-17被放到/usr/java目录下
vim /etc/profile/ // 命令修改环境变量
 export JAVA_HOME=/usr/java/jdk-17     
 export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar     
 export PATH=$PATH:$JAVA_HOME/bin 
source /etc/profile  // 使配置文件生效
java -version // 查看是否安装成功

安装maven

下载地址：https://maven.apache.org/download.cgi

curl -o apache-maven-3.9.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.9.5/binaries/apache-maven-3.9.5-bin.tar.gz // 下载maven
tar -zxvf  apache-maven-3.9.5-bin.tar.gz // 解压
vim /etc/profile // 配置环境变量
	export PATH=$PATH:/root/services/apache-maven-3.9.5/bin 
source /etc/profile  // 使配置文件生效
mvn -v // 查看是否安装成功

后端项目下载

使用maven工具的package命令将后端项目打成jar包并上传到服务端

chmod a+x user-center-backend-0.0.1-SNAPSHOT.jar // 将jar包变成可执行文件 
nohup java -jar user-center-backend-0.0.1-SNAPSHOT.jar --spring.profile.active=prod & // 在后台开启后端服务
netstat -ntlp // 查看是否运行在相应的端口上

宝塔 linux 部署

使用腾讯云可以直接选择，也可以到官网安装
开放端口，将自己的IP地址加入8888端口白名单（本机ip地址可以直接百度）
获取用户名和密码
在宝塔中修改账号密码

下载nginx，java

软件商店下载nginx，tomcat（下载tomcat自动下载java）

部署前端项目

网站->创建站点,输入IP地址即可
在wwwroot下创建一个前端项目文件夹并将前端dist中的文件上传上去

部署后端项目

文件->wwwroot目录下新建一个文件夹用于存放后端项目，将后端的jar包放入
网站->java项目，新建一个Java项目，配置如图（8080端口会被之前安装的tomcat占用，只要在软件商店中将其关闭即可，安装tomcat的目的是自动安装java）
在腾讯云和宝塔中都开放一下8080端口，http://122.51.45.166:8080/访问项目显示404表示部署成功

前后端部署架构功能点前后端项目_nginx

Docker 部署

步骤：1.编写docker文件 2.制作镜像

后端部署

先在项目根目录下创建一个名为Dockerfile的文件，编写内容

FROM maven:3.5-jdk-8-alpine as builder

# Copy local code to the container image
WORKDIR /app
COPY pom.xml .
COPY src ./src

# Build a release artifact
RUN mvn package -DskipTests

# Run the web service on container starup
CMD ["java","-jar","/app/target/jar包名称.jar","--spring.profiles.active=prod"]

在linux服务器上执行命令

sudo git clone 项目地址 // 从仓库拉取代码
cd xxx // 进入项目目录
sudo docker build -t 项目名称:版本号 . // 制作镜像，点号表示当前目录，会根据当前目录中的Dockerfile制作镜像
sudo docker run -p 8080:8080 项目名:版本号 # 启动镜像

sudo docker images # 查看镜像是否构建成功
sudo docker rmi -f 镜像名称 # 删除构建的镜像
sudo docker ps # 查看启动的镜像id
sudo docker kill 镜像id # 杀死这个启动的镜像
sudo docker logs 镜像id # 查看日志
sudo docker exec -i -t 镜像id /bin/bash #进入容器

前端部署

在项目与dist.zip平级的目录下创建一个Dockerfile，编写内容

FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

在与Dockerfile平级的目录下创建一个docker文件夹，在这个文件夹下创建一个nginx.conf文件。这个文件夹主要用来存放Dockerfile制作镜像时需要的一些文件。

server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }

}

在linux服务器上执行命令

sudo git clone 项目地址 // 从仓库拉取代码
cd xxx // 进入项目目录
docker build -t 项目名称:版本号 . // 制作镜像
docker run -p 80:80 -d 项目名:版本号 // 启动镜像

Docker平台部署

微信云托管
上传文件即可，平台运行docker命令帮你部署

域名绑定

购买域名和DNS解析
在DNS控制台中添加记录（前后端都要添加）
使用宝塔部署的项目还需要在项目的域名管理中添加域名才能访问（是否在服务器控制台中添加域名不重要，只是为了方便管理）
备案
后端在访问时要加:8080，因为访问时默认是80端口，会显示找不到站点

可以使用反向代理来解决，在宝塔网站中新建站点，域名填写后端的域名，并添加一个反向代理，目标url为http://127.0.0.1:8080。之后访问后端域名时会自动代理到本机的8080端口。

解决跨域问题

浏览器为了用户安全，仅允许向同域名，同端口的服务器发送请求
解决方法
1.将域名，端口改成相同的
2.添加跨域头允许跨域
2.1 网关支持(在新建的后端站点的配置文件中添加，当浏览器以后端域名来访问时会先到达nginx80端口，识别出以这个站点的域名访问时就使用下面的配置，先代理到8080端口，再允许跨域)

```
 # 跨域配置
 location ^~ /api/ {
     proxy_pass http://127.0.0.1:8080/api/;
     add_header 'Access-Control-Allow-Origin' $http_origin;
     add_header 'Access-Control-Allow-Credentials' 'true';
     add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
     add_header Access-Control-Allow-Headers '*';
     if ($request_method = 'OPTIONS') {
         add_header 'Access-Control-Allow-Credentials' 'true';
         add_header 'Access-Control-Allow-Origin' $http_origin;
         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
         add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
         add_header 'Access-Control-Max-Age' 1728000;
         add_header 'Content-Type' 'text/plain; charset=utf-8';
         add_header 'Content-Length' 0;
         return 204;
     }
 }
 ```

2.2 修改后端服务

2.2.1 配置@CrossOrigin注解
2.2.2添加web全局请求拦截器

```java
 @Configuration
 public class WebMvcConfg implements WebMvcConfigurer {
  
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         //设置允许跨域的路径
         registry.addMapping("/**")
                 //设置允许跨域请求的域名
                 //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                 .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
                 //是否允许证书 不再默认开启
                 .allowCredentials(true)
                 //设置允许的方法
                 .allowedMethods("*")
           			.allowedHeaders("*") // 允许所有有的请求头
                 //跨域允许时间
                 .maxAge(3600);
     }
 }
 ```

2.2.3 定义新的 corsFilter Bean

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。