记录将 Vue 项目部署到云服务器的所有步骤

发表于 更新于 分类于 阅读次数： 本文字数： 4.9k 阅读时长 ≈ 4 分钟

购买云服务器

我选择的是 Vultr 云服务器，官网为：https://www.vultr.com ，Vultr 还支持支付宝支付，最低充值金额 10 美元。

充值完成后，点击左侧的 Products 图标进入到 Products 界面，点击“加号” => Deploy New Server，进入到 Deploy New Instance 页面。

image-20210505160021504

Choose Server 选择 Cloud Compute。

image-20210505163448935

Server Location 选择服务器的位置，我选择的是美国西雅图。

image-20210505164114156

Server Type 选择服务器的操作系统，推荐选择 CentOS、Debian、Ubuntu，我选择的是 Debian10。

Server Size 选择服务器的大小，选择5美元一个月的就行。

image-20210505164602016

最后，点击 Deploy Now 就能成功部署一个新的服务器实例。

在 Products 界面可以看到服务器实例的列表，点进去查看详细信息。其中 IP 地址、用户名和密码是远程连接这台服务器需要的信息。

image-20210505170703140

远程连接云服务器

Xshell

安装 Xshell时出现了问题：由于找不到 mfc110.dll，无法继续执行代码。解决方案为：https://tongjiebin.cn/posts/5acc.html

打开 Xshell后，打开左上角的 “文件” => “新建”。

名称随便填一个，协议选择 SSH，主机为云服务器的 IP 地址，可以直接复制过来，端口号默认为22，点击“确认”。

image-20210505171542652

在“会话”对话框中，点击“连接”。

image-20210505172259726

输入用户名，默认为 root，勾选上“记住用户名”，点击“确定”。

image-20210505172456346

输入密码，密码在服务器信息的界面复制过来，勾选上“记住密码”，点击“确定”，就能连接到云服务器了。

image-20210505172615940

WinSCP

安装 WinSCP 后打开，进入到登录界面。文件协议选择 SFTP，主机名，用户名，密码同上，点击“登录”即可连接成功。WinSCP是用来传输本地文件到云服务器上，有可视化的界面，直接拖拽就行，操作很方便。

image-20210505173349509

安装 MySQL

Yum安装（推荐）

CentOS 8上安装 MySQL 8.0：

  1. 使用最新的包管理器安装MySQL
sudo dnf install @mysql
  1. 安装完成后，运行以下命令来启动MySQL服务并使它在启动时自动启动：
sudo systemctl enable --now mysqld
  1. 要检查MySQL服务器是否正在运行，请输入：
sudo systemctl status mysqld
  1. 运行mysql_secure_installation脚本，该脚本执行一些与安全性相关的操作并设置MySQL根密码：
sudo mysql_secure_installation

步骤如下：

要求你配置VALIDATE PASSWORD component（验证密码组件）：

  • 输入y ，回车进入该配置
  • 选择密码验证策略等级， 我这里选择0 （low），回车
  • 输入新密码两次
  • 确认是否继续使用提供的密码？输入y ，回车
  • 移除匿名用户？ 输入y ，回车
  • 不允许root远程登陆？ 如果需要远程登陆，所以输入n ，回车
  • 移除test数据库？ 输入y ，回车
  • 重新载入权限表？ 输入y ，回车
  1. 本机登录MySQL:
mysql -uroot -p<上面步骤中设置的密码>
  1. 接着继续执行mysql语句，将将root用户的host字段设为’%’：
use mysql;
update user set host='%' where user='root';
flush privileges;
  1. 设置完成后输入exit退出mysql，回到终端shell界面，接着开启系统防火墙的3306端口：
sudo firewall-cmd --add-port=3306/tcp --permanent
sudo firewall-cmd --reload
  1. 关闭MySQL主机查询dns，打开/etc/my.cnf文件，添加以下配置：
[mysqld]
skip-name-resolve
  1. 重启服务
sudo systemctl restart mysqld

参考资料：https://www.cnblogs.com/kasnti/p/11929030.html

APT 安装

Debian 8上安装 MySQL 8.0：

  1. 将 MySQL APT 存储库添加到系统
wget http://repo.mysql.com/mysql-apt-config_0.8.13-1_all.deb
  1. 下载完成后，以具有sudo权限的用户身份安装发行包
sudo apt install ./mysql-apt-config_0.8.13-1_all.deb

执行上面的命令后，会出现下面的界面。

按“Tab”选择到 <OK>，进入到如下的界面。默认安装的是 mysql - 8.0，选择“OK”，按下“Enter”就能成功安装 MySQL Server。

image-20220326154117258

image-20220326154250016

image-20210505211424118

image-20210505211705879

通过运行以下命令更新包列表并安装MySQL服务器包：

sudo apt update
sudo apt install mysql-server

image-20210505214119915

先不要设置密码，选择 <OK> 安装完成。

输入 mysql -v 查看 MySQL 的版本。

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 12
Server version: 8.0.24 MySQL Community Server - GPL

至此，MySQL已经成功安装完成。

参考资料：

https://blog.csdn.net/weixin_34209060/article/details/113141283

https://blog.csdn.net/sinat_35861664/article/details/53189500

在 MySQL 中导入 .sql 文件

  1. 输入show datebases;查看已有的数据库：
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)
  1. 输入 create database mydb; 创建一个名为 mydb 的数据库：
mysql> create database mydb;
Query OK, 1 row affected (0.01 sec)
  1. 输入 use mydb; 切换到 mydb 数据库：
mysql> use mydb;
Database changed
  1. 使用 WinSCP 把 .sql 文件传输到云服务器中的 /home/database 目录下。
  2. 输入 source /home/database/mydb.sql; 把mydb.sql 导入到 mysql 数据库中。
  3. 输入 create user admin identified by '123456'; 添加一个新用户 admin ，密码为 123456。

查看密码策略：

SHOW VARIABLES LIKE 'validate_password%';

修改validate_password.policy参数的值

set global validate_password.policy=0;

修改validate_password.length参数的值来设置密码的最小长度（这个值是由mix_case_count、number_count、special_char_count需大于等于这三个值和的最小值）

set global validate_password.length=6;
  1. 输入 grant all privileges on mydb.* to 'admin'@'%'; 给用户 admin 添加 mydb 数据库所有的权限。

  1. 输入 flush privileges; 刷新权限。

  2. 修改 root 的密码。

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新的密码';
  1. 输入 flush privileges; 刷新权限。
  2. 输入 service mysql start 启动 MySQL 服务。

参考资料：

导入 .sql 文件：https://blog.csdn.net/liyuxing6639801/article/details/65632730

添加用户和授权：https://www.cnblogs.com/chanshuyi/p/mysql_user_mng.html

修改密码：https://blog.csdn.net/u011365831/article/details/80256687

启动 MySQL 服务：https://www.cnblogs.com/linjiqin/p/3544472.html

安装 Node.js

输入如下命令安装 Node.js：

// CentOS操作系统
sudo yum module install nodejs
// Debian操作系统
sudo apt update
sudo apt install nodejs npm

查看 nodejs 的版本：

root@vultr:/# node -v
v10.24.0

nodejs 是自带 npm，查看 npm 的版本：

root@vultr:/# npm -v
5.8.0

参考资料：

https://ywnz.com/linuxjc/5819.html

启动项目

  1. 用 WinSCP 把所有的代码文件传输到云服务器上。
  2. npm install 安装所有的 npm 包。
  3. npm i pm2 -g 安装 pm2 。

pm2 可以用来管理 需要在服务器上一直存活的进程。

pm2 常用命令：

在服务器中安装 pm2： npm i pm2 -g
启动项目： pm2 start 脚本 –name 自定义名称
查看运行项目： pm2 ls
重启项目： pm2 restart 自定义名称
停止项目： pm2 stop 自定义名称
删除项目： pm2 delete 自定义名称

  1. 进入到 api 目录下，运行命令： pm2 start .\app.js --name api，其中 api 是你为这个进程起的名字。
  2. 进入到 vue 项目中，运行命令： pm2 start .\app.js --name shop。现在可以在你的电脑上输入云服务器的 IP 地址就能访问到你的 Vue 项目了。
  3. 运行 pm2 ls ,查看当前运行的进程：

image-20210506192315015

参考资料：https://www.douban.com/note/314200231

使用自定义域名指向你的 Vue 项目

以阿里云为例：

  1. 进入到域名解析界面：

image-20210506192943575

  1. 点击解析设置，添加一条记录，记录类型为 A，主机记录为 你自定义的二级域名，解析路线为 默认，记录值为 云服务器的 IP 地址，点击“确认”。

image-20210506193056874

  1. 在解析设置界面就能看到你新加的一条记录。

image-20210506193402336

  1. 现在你就可以通过你设置的二级域名来访问 Vue 项目了。

出现的问题

访问接口地址出现503错误，解决办法：关闭防火墙

查看防火墙状态
systemctl status firewalld.service
开启防火墙
systemctl start firewalld.service
关闭防火墙
systemctl stop firewalld.service
禁用防火墙
systemctl disable firewalld.service

现在访问 vueshop.tongjiebin.cn 这个域名可以打开 Vue 项目，但是不能点击登录有报错。

F12 进行调试，发现 login 这个接口请求的 URL 是 127.0.0.1。

这个地址是本地环回地址，访问 127.0.0.1 其实就是访问的本机的接口，在电脑的hosts文件中都会有这样的设置：

#	127.0.0.1       localhost
#	::1             localhost

修改请求的 URL 为服务器的 IP 地址后，登录成功,但是又有了新的问题:

部分文字为乱码,这部分的文字都是都是通过这个 api 接口获取的数据库中的数据。

解决方法：

  1. 修改 mydb.sql 文件里面所有创建表的语句，把字符集设置为 utf8mb4：

image-20210509132350354

  1. 修改 MySQL 字符集：https://tongjiebin.cn/posts/1a4b.html