网页前后端在云服务器上的部署教程

最新推荐文章于 2024-05-24 23:01:45 发布

KiraFenvy

最新推荐文章于 2024-05-24 23:01:45 发布

阅读量2.4k

点赞数 2

分类专栏：搭网站 Linux 文章标签：服务器 nginx 运维

本文链接：https://blog.csdn.net/m0_51371693/article/details/125796081

版权

Linux 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

搭网站

3 篇文章 0 订阅

订阅专栏

网页前后端在云服务器上的部署教程

1.前端部署
- 1.1 安装nginx服务器
- 1.2 前端文件部署和环境配置
2.后端部署

本文为前后端在云服务器上的部署教程，其中系统镜像为CentOS 8，前端部署使用nginx，后端为maven打包的springboot项目，注意使用快照来保存进度。

1.前端部署

1.1 安装nginx服务器

假设把文件都放在services下

创建services目录，用来存放所有项目的依赖和安装包（可选）

>> mkdir services

>> cd services

可以参考其他安装方式 Nginx三种安装方式

下载nginx包并更名

注意这里的链接是从官网复制出来的，可能会变化

services>> curl -o nginx-1.20.2.tar.gz http://nginx.org/download/nginx-1.20.2.tar.gz
#  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
#                                 Dload  Upload   Total   Spent    Left  Speed
#100 1037k  100 1037k    0     0  48743      0  0:00:21  0:00:21 --:--:-- 46562
services>> ls
# mysql-community-release-el7-5.noarch.rpm  nginx-1.20.2.tar.gz

解压

services>> tar -zxvf nginx-1.20.2.tar.gz

如果产生下列报错，证明上面的链接无效

tar: This does not look like a tar archive

gzip: stdin: not in gzip format
tar: Child returned status 1
tar: Error is not recoverable: exiting now

//可以验证一下文件类型，是HTMLdocument就是链接文件，无效，重新在官网复制链接，下面下载maven同理
[root@aaa services] file nginx-1.20.2.tar.gz
nginx-1.20.2.tar.gz: HTML document, ASCII text

进入nginx目录

nginx-1.20.2>> cd nginx-1.20.2
nginx-1.20.2>> ls
#auto  CHANGES  CHANGES.ru  conf  configure  contrib  html  LICENSE  man  README  src

安装依赖，本文参考Centos 8 安装 nginx

#一次安装4个插件
yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
#一次安装如果有问题，可以试一下分开安装（上面命令执行成功了就就无需执行以下命令了）
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

配置并编译，然后安装


//configure
>> ./configure 
//编译
>> make
//安装
>> make install

环境变量配置

nginx-1.20.2>> vim /etc/profile 
# 按下shift+g将光标定位到最后一行，新增以下内容：
export PATH=$PATH:/usr/local/nginx/sbin	

# 使文件生效
nginx-1.20.2>> source /etc/profile
nginx-1.20.2>> nginx
# 没有报错，环境变量配置完毕
nginx-1.20.2>>

查看端口启动情况，看看有没有nginx

nginx-1.20.2>> netstat -ntlp
Active Internet connections (only servers)
#Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
#tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      8210/nginx: master
#tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1648/sshd      
#tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1120/master    
#tcp6       0      0 :::22                   :::*                    LISTEN      1648/sshd      
#tcp6       0      0 ::1:25                  :::*                    LISTEN      1120/master    
#tcp6       0      0 :::3306                 :::*                    LISTEN      10626/mysqld

复制nginx.conf配置文件，并重命名为nginx.default.conf作为备份，以备不时之需


nginx-1.20.2>> cd /usr/local/nginx/conf

conf>> cp nginx.conf nginx.default.conf

回到services目录

conf>> cd /root/services
services>>

1.2 前端文件部署和环境配置

把前端构建的dist文件传到服务器上，一般通过远程连接工具直接拖拽文件即可，博主用的是Xshell，传输速率一直为0的话需要

#-y单纯是避免询问
yum -y install lrzsz

Xshell还不能拖拽文件夹，得先打包成zip，zip拖拽到services目录下后，需要unzip解压

这里解压后顺便改名成user-center-frontend

unzip dist.zip -d user-center-frontend

修改nginx配置文件

user-center-front>> cd /usr/local/nginx/conf
conf>> vim nginx.conf
修改文件内容为：
user  root;(修改的地方)
worker_processes  1;
....(省略)....
location / {
  root   /root/services/user-center-front;(修改的地方)
  index  index.html index.htm;
}
....(省略)....
然后按ESC键退出编辑模式,按 :wq  保存退出

更新配置

conf>> nginx -s reload

防火墙设置

conf>> firewall-cmd --zone=public --add-port=80/tcp --permanent
#success
//防火墙重新加载配置
conf>> firewall-cmd --reload
#success
//查看开放的端口
conf>> firewall-cmd --list-ports
#3306/tcp 80/tcp

然后就可以用公网IP访问了

2.后端部署

2.1 服务器环境配置

安装java

conf>> yum install -y java-1.8.0-openjdk*
//yum安装不用配置环境变量，它直接帮我们安装好了
//查看java版本,安装成功
conf>> java -version
#openjdk version "1.8.0_322"
#OpenJDK Runtime Environment (build 1.8.0_322-b06)
#OpenJDK 64-Bit Server VM (build 25.322-b06, mixed mode)

安装maven

conf>> cd /root/services/
services>> curl -o apache-maven-3.8.6-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.6/binaries/apache-maven-3.8.6-bin.tar.gz
services>> ls
#apache-maven-3.8.6-bin.tar.gz             nginx-1.20.2         user-center-front
#mysql-community-release-el7-5.noarch.rpm  nginx-1.20.2.tar.gz
//解压
services>> tar -zxvf apache-maven-3.8.6-bin.tar.gz
services>> ls
#apache-maven-3.8.6             mysql-community-release-el7-5.noarch.rpm  nginx-1.20.2.tar.gz
#apache-maven-3.8.6-bin.tar.gz  nginx-1.20.2                              user-center-front

进入到maven

services>> cd apache-maven-3.8.5
apache-maven-3.8.5>> cd bin
bin>> ls
#m2.conf  mvn  mvn.cmd  mvnDebug  mvnDebug.cmd  mvnyjp
//这里的mvn是maven的可执行文件,咱们就是用这个文件去构建项目

//复制当前所在的目录路径
bin>> pwd
#/root/services/apache-maven-3.8.5/bin

添加到环境变量

bin>> vim /etc/profile
// 按下shift+g将光标定位到最后一行，把刚刚复制的路径粘贴到nginx环境变量后面：
export PATH=$PATH:/user/local/nginx/sbin:/root/services/apache-maven-3.8.5/bin
然后按ESC键退出编辑模式,按 :wq 保存退出

//使文件生效
bin>> source /etc/profile

查看是否设置成功

bin>> cd /root/services/
services>> mvn -v
#Apache Maven 3.8.5 (3599d3414f046de2324203b78ddcf9b5e4388aa0)
#Maven home: /root/services/apache-maven-3.8.5
#Java version: 1.8.0_322, vendor: Red Hat, Inc., runtime: /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.322.b06-1.el7_9.x86_64/jre
#Default locale: en_US, platform encoding: UTF-8
#OS name: "linux", version: "3.10.0-1160.45.1.el7.x86_64", arch: "amd64", family: "unix"
//可以查看maven命令的帮助
services>> mvn --help

2.2 后端文件部署

2.2.1 把打包好的文件放在服务器上

一是直接把target文件夹移动到服务器上

二是使用git下载上传到github的文件，再通过前面下载的mvn编译

安装git，但是服务器上使用git可能会有一些错误，所以执行之前一定要保存快照

>> yum install -y git

进入项目文件

services>> cd user-center-backend
user-center-backend>> ls
#mvnw  mvnw.cmd  pom.xml  README.md  sql  src

用mvn编译

//打包构建，跳过测试
user-center-backend>> mvn package -DskipTests
//这个构建完之后就是之前后端打包的jar，可以直接用之前的jar
//拖到user-center-backend目录中去执行，因为maven默认会去国外下载依赖，很慢
//直接用我们之前打包好的也行
user-center-backend>> ls
#mvnw  mvnw.cmd  pom.xml  README.md  sql  src  user-center-backend-0.0.1-SNAPSHOT.jar

2.2.2 执行jar包

以下是“踩坑的命令”，只是为了表明这些命令的思路，不用全试

cd target
user-center-backend>> java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

//执行后如果显示没有权限;给这个文件添加可执行权限
user-center-backend>> chmod a+x user-center-backend-0.0.1-SNAPSHOT.jar
//再ls就会发现user-center-backend-0.0.1-SNAPSHOT.jar变成绿色了
user-center-backend>> ls
//再次执行
user-center-backend>> java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

//当然这么用的话，这个窗口就不能做任何事了,被这个命令占满了,按ctrl+c中断它
//让它在后台运行nohup命令
user-center-backend>> nohup java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
//可以看见它正在运行
user-center-backend>> jobs
#[1]+  Running                 nohup java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
//这里可以看到java在8080端口启动了
user-center-backend>> netstat -ntlp
#Active Internet connections (only servers)
#Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
#tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1393/sshd      
#tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1396/master    
#tcp6       0      0 :::3306                 :::*                    LISTEN      1441/mysqld    
#tcp6       0      0 :::8080                 :::*                    LISTEN      4367/java      
#tcp6       0      0 :::22                   :::*                    LISTEN      1393/sshd      
#tcp6       0      0 ::1:25                  :::*                    LISTEN      1396/master 
//用jps也可以看到运行的java程序
user-center-backend>> jps
#7298 Jps
#4367 user-center-backend-0.0.1-SNAPSHOT.jar

实际上有用的命令

cd target

chmod a+x user-center-backend-0.0.1-SNAPSHOT.jar

//让它在后台运行
nohup java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &

//可以看见它正在运行
jobs
#[1]+  Running                 nohup java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
//这里可以看到java在8080端口启动了
netstat -ntlp
#Active Internet connections (only servers)
#Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
#tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1393/sshd      
#tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1396/master    
#tcp6       0      0 :::3306                 :::*                    LISTEN      1441/mysqld    
#tcp6       0      0 :::8080                 :::*                    LISTEN      4367/java      
#tcp6       0      0 :::22                   :::*                    LISTEN      1393/sshd      
#tcp6       0      0 ::1:25                  :::*                    LISTEN      1396/master 
//用jps也可以看到运行的java程序
jps
#7298 Jps
#4367 user-center-backend-0.0.1-SNAPSHOT.jar