首页 前端

# 一、购买服务器（腾讯云、阿里云……）

云服务器操作系统分为 Windows 和 Linux 类，Linux 系统相对于 win 占用更少系统资源，一般选用 Linux

阿里云 Linux 镜像可选 Aliyun Linux、CentOS、Ubuntu、Debian、SUSE Linux、OpenSUSE、CoreOS 和 FreeBSD。

Aliyun Linux 是阿里云原生 Linux 操作系统，针对 ECS 做了大量深度优化，完全兼容 CentOS 生态和操作方式；

如果是 Web 网站应用，免费好用首选 CentOS；

Ubuntu 基于 Debian，新手更容易上手，时长占有率也高。
综上，阿里云 ECS 云服务器 Linux 镜像推荐选择 Aliyun Linux、CenOS 或 Ubuntu 都可以，根据用户实际熟悉程度及应用选择

这里选用：CentOS 7.2 的 Linux 系统

前端开发工具：WebStorm vue+element
后端开发工具：IDEA spring boot
部署环境：阿里云 Linux CentOS7
输入图片说明

# 二、下载 X-shell 和 Xftp

家庭 / 学校免费 - NetSarang Website

每次连接服务器都要一步步连挺麻烦的 ∴借助一个第三方的工具进行远程与服务器连接

管理云服务器的软件：XShell，Putty，SecureCRT 等

使用的是 Xshell 和 Xftp。

Xshell 提供了一个终端界面用于 Shell 操作，使用 SSH 协议连接到远程服务器

Xftp 支持 SSH 和 SFTP 协议，主要用于文件传输和管理
输入图片说明
输入图片说明​

# 三、部署前准备

# 1、打包前端文件 dis

修改 baseUrl：

新建文件.env.development（本地配置）

VUE_APP_BASEURL='http://localhost:9090'

新建文件..env.production（开发配置）

VUE_APP_BASEURL='http:// 服务器地址：9090'

main.js 设置全局变量 $baseUrl

Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL

# 打包：npm run build

vue-cli-service 默认会读取 env.development 文件

输入图片说明

# 2、打包后端文件 jar

# 打包 ：mvn clean package 执行打包后的 jar

输入图片说明输入图片说明

# 3、打包后可以先尝试一下运行打包的文件

用 serve 执行前端打包的 dis

输入图片说明

用 java -jar 执行后端打包的 jar

输入图片说明

# 四、 部署云服务器的环境并将打包的前后端文件上传上去

# 1、使用上面下载的 X-shell 和 Xftp 安装软件：nginx、jdk、mysql

输入图片说明

# 安装 jdk1.8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 要解压的目录			
tar -zxvf /tmp/jdk-8u371-linux-x64.tar.gz -C /usr/local/
mv /usr/local/jdk1.8.0_371 /usr/local/java
   
vi /etc/profile
# 进到profile文件里进行编辑，再最后一行追加内容
export JAVA_HOME=/usr/local/java
export PATH=$JAVA_HOME/bin:$PATH

#执行
source /etc/profile

# 验证
java -version

输入图片说明

# 安装 nginx

a. 安装库文件

#安装 gcc
yum install gcc-c++

#安装 PCRE pcre-devel
yum install -y pcre pcre-devel

#安装 zlib
yum install -y zlib zlib-devel

#安装 Open SSL
yum install -y openssl openssl-devel

b. 解压、编译 nginx 并安装

mkdir /usr/local/nginx
tar -zxvf /tmp/nginx-1.24.0.tar.gz -C /usr/local/nginx

cd /usr/local/nginx/nginx-1.24.0
# 编译安装
./configure --with-http_stub_status_module --with-http_ssl_module
make && make install

c.nginx 命令

cd /usr/local/nginx/sbin
./nginx # 启动

ps -ef | grep nginx # 查看
./nginx -s stop # 停止
./nginx -s reload # 重启

ps -ef | grep nginx

输入图片说明

d.nginx 配置

输入图片说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
    listen       80;
    server_name  localhost;
    
    #charset koi8-r;
    
    #access_log  logs/host.access.log  main;
    
    location / {
        root   /home/server/honey2024/vue/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

root 填写前端打包的文件 dist 位置；

root /home/server/honey2024/vue/dist; // 访问你打包的 vue 文件 dis

try_files $uri $uri//index.html; // 因为用了 vue-router

e. 执行命令重启：

d /usr/local/nginx/sbin

./nginx -s reload

# 安装 mysql

linux 系统会自动携带一个数据库，我们需要把它给卸载掉

通过以下代码可以查看 mariadb 并卸载

rpm -qa | grep mariadb
yum remove -y mariadb-connector-c-3.1.11-2.oc8.1.x86_64
yum remove -y mariadb-connector-c-config-3.1.11-2.oc8.1.noarch

下载 mysql 并 上传到 /tmp 目录

安装 mysql 命令：

mkdir /data/mysql
tar -zxvf /tmp/mysql-5.7.42-el7-x86_64.tar.gz -C /usr/local
mv /usr/local/mysql-5.7.42-el7-x86_64 /usr/local/mysql

#添加用户组
groupadd mysql
useradd -r -g mysql mysql
chown -R mysql.mysql /usr/local/mysql
chown -R mysql.mysql /data/mysql

cd /usr/local/mysql
/usr/local/mysql/bin/mysqld --user=mysql --basedir=/usr/local/mysql/ --datadir=/data/mysql --initialize

#将 mysql 加入到服务中
cp /usr/local/mysql/support-files/mysql.server/etc/init.d/mysql

#mysql 快捷方式
ln -s /usr/local/mysql/bin/mysql/usr/bin
ln -s /usr/lib64/libtinfo.so.6.1 /usr/lib64/libtinfo.so.5
ln -s /usr/lib64/libncurses.so.6.1 /usr/lib64/libncurses.so.5

输入图片说明

记住上面的临时密码

配置 mysql 配置文件 my.cnf

vi /etc/my.cnf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[mysqld]
datadir=/data/mysql
basedir=/usr/local/mysql
socket=/tmp/mysql.sock
user=mysql
port=3306
character-set-server=utf8
# 取消密码验证
# skip-grant-tables
# # Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
[mysqld_safe]
log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid

启动 mysql： service mysql start
输入图片说明

开机启动: chkconfig mysql on

登录 mysql： mysql -uroot -p

输入临时密码进入 mysql 修改密码并设置权限：

修改密码并设置权限：

SET PASSWORD = PASSWORD('1234');

use mysql;
update user set host ='%'where user ='root' and host ='localhost';
flush privileges;
exit;

使用 SQLyogt 连接 mysql
输入图片说明

设置服务器防火墙：

输入图片说明

新建数据库并将本地数据库导入远程的

输入图片说明

# 2、部署前端文件 dist

使用 X-shell 和 Xftp 创建文件夹：mkdir -p /home/server/honey2024

上传 dist 文件夹到 /home/server/honey2024/vue
输入图片说明

# 3、部署后端文件 jar

上传 jar 包到服务器 /home/server/honey2024/java 目录

设置 application.yml 覆盖

输入图片说明

添加 启动和停止脚本

cd /home/server/honey2024/java

vi start.sh

1
2
3
NAME=springboot-0.0.1-SNAPSHOT.jar
nohup java -jar $NAME > server.log 2>&1 &
echo 'start success'

vi stop.sh

1
2
3
4
5
6
7
8
PORT=8082
pid=`netstat -tnlp | grep $PORT | grep -v grep | awk '{print $7}' | awk -F/ '{print $1}'`
if [ ${pid} ]; then
    kill -9 $pid
    echo "kill $PORT"
else
    echo 'stop sucess!'
fi

赋权 chmod +x *

输入图片说明

去除脚本文件里的特殊符号（可选）

sed -i 's/\r//' start.sh

sed -i 's/\r//' stop.sh

完成后的目录文件：
输入图片说明

# 4、启动程序：

1
2
cd /home/server/honey2024/java
./start.sh

实时查看日志：tail -100f server.log
输入图片说明

设置防火墙端口 9090

输入图片说明

之后，访问公网 ip 可以预览上线项目了

题外话：可以在云服务器上安装宝塔面板来管理项目

​

更新于