Linux下部署前后端分离项目 —— Linux下安装nginx

1 打包前后端项目

1.1 打包Vue项目

# 构建生产环境包
npm run build:prod

注意:我这边使用的命令是 npm run build:pro,一般都是 npm run build:prod,具体看前端package.json文件中是如何配置的,如下:

1.2 后端打包

使用 maven 工具进行打包,先清理(双击 clean)再打包(双击 install),如下:

打包完成后,再需要部署模块的 target 目录下找到相关 jar

2 Linux下安装nginx

2.1 下载安装包

下载地址:nginx: download

这里选择下载的版本为:nginx-1.20.0,如下图:

将下载后的压缩包上传至linux服务器,如下图: 

2.2 解压安装包并移动nginx

# 解压安装包
tar xzf nginx-1.20.2.tar.gz
# 将安装包移动至 /usr/local/nginx
mv nginx-1.20.2 /usr/local/nginx

2.3 编译安装nginx

2.3.1 配置nginx

# 进入nginx目录
cd /usr/local/nginx
# 配置nginx。其中,./configure:代表配置编译选项,--prefix:指定安装目录
./configure --prefix=/usr/local/nginx

运行 ./configure --prefix=/usr/local/nginx 可能会出现以下错误:

如上图,缺少 gcc 依赖,安装 gcc,命令如下:

# 安装 gcc 依赖
yum -y install gcc

gcc 依赖安装完,重新执行 ./configure --prefix=/usr/local/nginx 。可能会提示以下错误:

如上图,缺少 pcre 依赖,安装 pcre,命令如下:

yum install -y pcre pcre-devel

pcre 依赖安装完,重新执行 ./configure --prefix=/usr/local/nginx 。可能会提示以下错误:

 如上图,缺少 zlib 依赖,安装 zlib,命令如下:

yum install -y zlib zlib-devel

zlib 依赖安装完,重新执行 ./configure --prefix=/usr/local/nginx 。配置nginx执行成功,提示如下:

2.3.2 构建&安装nginx

1. configure成功,使用 make 命令,编译nginx,出现如下图,说明编译成功

2. make成功,使用 make install /usr/local/nginx/ 命令,安装nginx,出现如下图,说明编译成功

2.4 启动nginx

# 进入 nginx 的 sbin 目录
cd /usr/local/nginx/sbin/
# 启动nginx
./nginx

# 如果 /usr/local/nginx/ 目录下没有日志文件夹,nginx启动会报错
# nginx下创建日志文件夹,并赋予权限
cd ..
mkdir logs
chmod 700 logs # 只有拥有者有读、写、执行权限。

重启 nginx ,如下:

nginx 常用命令,如下:

(1)启动:./nginx -c /usr/local/nginx/conf/nginx.conf

(2)快速停止:./nginx -s stop

(3)优雅关闭,在退出前完成已经接受的连接请求:./nginx -s quit

(4)重新加载配置:./nginx -s reload

2.5 验证nginx是否启动成功

浏览器输入服务地址,出现以下页面,说明启动成功:

2.6 设置nginx开机自启

1. 停止 nginx ,使用命令:./nginx -s stop

2. 新增脚本服务,使用命令:vi /usr/lib/systemd/system/nginx.service ,脚本内容如下:

[Unit]

Description=nginx - web server

After=network.target remote-fs.target nss-lookup.target

[Service]

Type=forking

PIDFile=/usr/local/nginx/logs/nginx.pid

ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf

ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

ExecReload=/usr/local/nginx/sbin/nginx -s reload

ExecStop=/usr/local/nginx/sbin/nginx -s stop

ExecQuit=/usr/local/nginx/sbin/nginx -s quit

PrivateTmp=true

[Install]

WantedBy=multi-user.target

使用 :wq 命令保存脚本。

3. 重新加载 systemd 的服务单元文件(/usr/lib/systemd/system/下的.service文件)

systemctl daemon-reload

4. 重启 nginx 服务

systemctl start nginx

5. 配置系统服务后,nginx 常用命令,如下

(1)启动:systemctl start nginx

(2)停止:systemctl stop nginx

(3)查询nginx运行状态:systemctl status nginx

(4)重启: systemclt restart nginx

6. 如果希望服务每次启动后,nginx 自动运行,输入以下命令:

        设置 nginx 开机自启

systemctl enable nginx.service

3 部署

3.1 前端部署

将前端打包好的 dist 上传至服务器的 nginx 中的 html 目录下,如下:

3.2 后端部署

1. 这里以网关服务为例,将网关模块的相关 jar 放在一个路径下,如下图:

2. 新建启动脚本,start.sh

// 1. 新增 .sh 文件
touch start.sh
// 2. 修改 .sh 文件操作权限
chmod 777 start.sh
// 打开 start.sh 文件
vi start.sh
// 输入脚本内容

// 保存并退出
:wq

脚本内容,如下:

#!/bin/bash
# 相关jar,例如:xxx.jar
JAR_NAME=xxx-gateway.jar
# jar包所在目录,例如:/root/xyd/xxx/xxx-gateway/
JAR_PATH=/root/xyd/xxx/xxx-gateway/
#您所希望jar启动的端口号,设置前请先查询是否已经被占用的情况
PORT=89
 
# 设置日志输出文件信息
dat1=$(date +%Y-%m-%d-%H-%M)
 
cd `dirname $0`
#使用说明,用来提示输入参数
usage() {
    echo "Usage: sh 执行脚本.sh [start|stop|restart|status]"
    exit 1
}
#检查程序是否在运行
is_exist(){
  pid=`ps -ef|grep -E ''$JAR_NAME'.'$PORT'|'$PORT'.*'$JAR_NAME''|grep -v grep|awk '{print $2}'`
  #如果不存在返回1,存在返回0
  if [ -z "${pid}" ]; then
   return 1
  else
    return 0
  fi
}
 
#启动方法
start(){
  is_exist
  if [ $? -eq "0" ]; then
    echo "${JAR_NAME} is already running. pid=${pid} ."
  else
	nohup java -Xms256m -Xmx524m -Dfastjson.parser.safeMode=true -Dfile.encoding=UTF-8 -Dserver.port=${PORT} -jar ${JAR_PATH}${JAR_NAME} > ${JAR_PATH}${dat1}.log  2>&1 &
    echo "${JAR_NAME} is start success"
    #tail -f fileserver-web.out
  fi
}
 
 
#停止方法
stop(){
  is_exist
  if [ $? -eq "0" ]; then
    kill -9 $pid
    echo "${JAR_NAME} is  stoped"
  else
    echo "${JAR_NAME} is not running"
  fi
}
 
 
#输出运行状态
status(){
  is_exist
  if [ $? -eq "0" ]; then
    echo "${JAR_NAME} is running. Pid is ${pid}"
  else
    echo "${JAR_NAME} is NOT running."
  fi
}
 
#重启
restart(){
  stop
  start
}
 
#根据输入参数,选择执行对应方法,不输入则执行使用说明
case "$1" in
  "start")
    start
    ;;
  "stop")
    stop
    ;;
  "status")
    status
    ;;
  "restart")
    restart
    ;;
  *)
    usage
    ;;                                                                                                                                                
esac

3. 启动 jar

启动关闭脚本相关命令:

(1)启动:./start.sh start

(2)关闭:./start.sh stop

(3)重启:./start.sh status

(4)查看状态:./start.sh restart

借鉴博客:linux启动jar的各种命令和脚本_linuxjar包启动命令-优快云博客

4.查看jar是否在运行

# 查询所有正在运行的jar
ps -ef | grep java
# 查询指定jar是否在运行
ps -ef | grep "xxx-gateway.jar"

3.3 修改 nginx 配置文件

输入命令 vi /usr/local/nginx/conf/nginx.conf ,修改配置文件,如下

重启 nginx ,如下:

systemclt restart nginx

3.4 验证部署

浏览器输入服务器地址:http://192.xx.xx.10/

### 部署前后端分离项目的准备 为了成功地将基于IDEA开发的Vue+Spring Boot前后端分离项目部署Linux服务器,需遵循一系列操作流程来确保应用能够稳定运行。这不仅涉及前端Vue项目的构建与传输,还包括后端Spring Boot服务的配置以及整个系统的优化设置。 ### 打包Vue前端项目 在本地环境中完成Vue项目的最终版本编译工作至关重要。通过执行`npm run build`命令可以生成用于生产环境的静态资源文件夹dist[^1]。此过程会依据vue.config.js中的设定自动生成适用于线上发布的HTML/CSS/JS等静态资产。 ```bash cd /path/to/vue/project npm install npm run build ``` 上述指令首先安装依赖项并随后触发构建任务,从而产出压缩后的静态网页资料供后续上传之用。 ### 处理Spring Boot后端工程 对于采用Maven作为构建工具管理的Java应用程序而言,在IDEA内利用内置功能简化了打包步骤。具体来说: - 清除现有目标目录下的残留数据以防止潜在冲突; - 调用package生命周期阶段自动下载所需库并将整个Web应用封装成可独立执行的JAR/WAR档案形式保存于target子路径之下[^3]。 ```xml <build> <plugins> <!-- 插入maven插件 --> ... </plugins> </build> ``` 以上XML片段展示了pom.xml中定义的一部分POM结构化描述符,其中包含了有关如何组装成品的信息。 ### 构建Shell自动化脚本 编写一段简单的shell script有助于提高效率,减少重复劳动带来的错误风险。该批处理文件应当具备如下特性: - 接受必要的参数输入(如远程主机地址、用户名密码组合)以便灵活适应不同场景需求; - 实现SCP协议传送方式把经过预处理过的webapp组件迁移到指定位置; - 设置SELinux安全上下文标签赋予适当读写权限给新加入的对象; ```sh #!/bin/bash # 定义变量存储登录凭证和其他必要信息 HOST="your.server.ip" USER="root" PASSWORD="pass" # 使用scp复制文件到远端机器上的特定目录 sshpass -p $PASSWORD scp -r ./frontend/dist/* ${USER}@${HOST}:/var/www/html/ sshpass -p $PASSWORD ssh ${USER}@${HOST} "chmod -R 755 /var/www/html/" echo "Frontend deployment completed." ``` 这段代码实现了从当前计算机向另一台网络节点转移已打包好的前端页面素材,并调整其访问控制属性使之能被正常加载显示出来。 ### 文件传输与权限分配 借助SFTP客户端或者前述提到的方法之一实现跨平台间的数据交换之后,则有必要针对目的站点内的各个组成部分授予恰当的操作许可级别。通常情况下,可通过修改inode元数据里的mode字段达到这一目的——即运用`chmod`实用程序改变相应bitmask位模式表示法所对应的特权集合状态。 ```bash sudo chmod +x start.sh sudo chown www-data:www-data -R /opt/springboot-app/ ``` 这里的第一条语句使得名为start.sh的外壳程序获得被执行的能力;而第二条则指定了Apache/Nginx Web server进程的身份标识拥有者及其所属组别对位于/opt/springboot-app/内部的所有实体享有完全掌控权。 ### 开启防火墙端口映射 考虑到网络安全策略可能阻挡外部请求抵达内部监听的服务实例,因此务必确认相关联的通信信道畅通无阻。可以通过编辑iptables规则链表或是调用firewalld守护进程接口开放HTTP(S)/其他自定义业务逻辑交互所需的TCP端口号范围[^2]。 ```bash sudo firewall-cmd --zone=public --add-port=80/tcp --permanent sudo firewall-cmd --reload ``` 这两行命令分别指示永久性添加一条允许进入流量穿越公共区域到达第80号端点的新规例记录,紧接着刷新全局过滤器列表使更改即时生效。 ### 启动应用程序 最后一步就是激活已经就绪的应用容器。如果选择了jar包的形式分发的话,那么可以直接依靠java虚拟机解释执行入口类main()函数启动后台线程池提供RESTful API接口响应能力。 ```bash nohup java -jar spring-boot-demo.jar & tail -f nohup.out ``` 此处采用了nohup机制绕过终端挂起信号影响长期存活的任务进程,并且重定向标准输出流至日志文件方便日后排查故障原因所在之处。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值