前后端分离项目(gin+gorm+vue3)腾讯云部署详细教程(go,mysql,nginx安装)

2022-11-12 15:26:39 浏览数 (1)

(一)服务器购买与配置

1. 购买服务器

进入腾讯云官网点击最新活动,进入云 校园专区,我购买的是第一个

购买完成后,进入控制台,云产品选择轻量应用服务器,即可查看到自己的服务器,记住自己的公网IP

2. 重置密码

点击进入服务器详情,初次使用需重置密码

点击重置密码按提示操作即可,记住这个密码

3. 添加端口

点击防火墙,添加常用端口,我添加了mysql端口3306及我后端常用的8080和9090端口

(二)Xshell安装与使用

1. 安装Xshell

进入Xshell家庭学校版官网,填写邮箱,该邮箱将收到相应的安装包链接

点击邮箱收到的链接即可开始下载,下载后按提示安装即可

2. 使用Xshell连接服务器

打开Xshell,新建一个连接,填入以下信息

建议勾选记住用户名和密码,点击确定,登陆成功

(三)go和mySQL环境安装与后端部署

1. 安装Go环境

将go安装包下载并解压到/usr/local

代码语言:txt复制
cd /usr/local
wget https://dl.google.com/go/go1.17.6.linux-amd64.tar.gz
tar -xzvf go1.17.6.linux-amd64.tar.gz

在$HOME创建go工作目录

代码语言:txt复制
cd ~
mkdir workspace_go

配置环境变量并设置代理

代码语言:txt复制
vim /etc/profile

在/etc/profile文件中加入这几行

代码语言:txt复制
export GOROOT=/usr/local/go
export PATH=$PATH:$GOROOT/bin
export GOPATH=$HOME/go
export GO111MODULE=auto
export GOPROXY=https://goproxy.cn,direct

执行/etc/profile文件

代码语言:txt复制
source /etc/profile

测试go环境,进入workspace_go,创建helloworld.go

代码语言:txt复制
cd workspace_go
vi helloworld.go

写入测试程序

代码语言:go复制
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

运行测试程序

代码语言:txt复制
go run helloworld.go

出现以下结果说明go环境配置完成

2. 安装mySQL环境

下载了安装用的Yum Repository

代码语言:txt复制
wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

安装mySQL

代码语言:txt复制
yum -y install mysql57-community-release-el7-10.noarch.rpm
代码语言:txt复制
yum -y install mysql-community-server

【注意:】

如果报错Failing package is: mysql-community-client-5.7.38-1.el7.x86_64 GPG Keys are configured as: file://,则执行以下语句再执行报错前的语句

代码语言:txt复制
rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022

mySQL安装完成

启动mySQL

代码语言:txt复制
systemctl start  mysqld.service

查看mySQL运行状态

代码语言:txt复制
systemctl status mysqld.service

mySQL正常运行

找出root用户的原始密码

代码语言:txt复制
grep "password" /var/log/mysqld.log

用这个原始密码进入数据库

代码语言:txt复制
mysql -uroot -p

修改原始密码('newpassword'为新密码,必须要大小写字母数字和特殊符号(,/';:等)

代码语言:txt复制
ALTER USER 'root'@'localhost' IDENTIFIED BY 'new password';

开启mySQL远程访问

代码语言:txt复制
grant all privileges on *.* to 'root'@'%' identified by 'password' with grant option;
代码语言:txt复制
flush privileges; 

查看mySQL状态,可看到字符集不是utf-8

代码语言:txt复制
status;

先退出mySQL,再修改mySQL配置文件

代码语言:txt复制
exit
代码语言:txt复制
vi /etc/my.cnf

再/etc/my.cnf中加入这几行

代码语言:txt复制
[client]
default-character-set=utf
代码语言:txt复制
character-set-server=utf8
collation-server=utf_general_ci

保存后重启mySQL,输入status再次查看,可看到变化

代码语言:txt复制
service mysqld restart
mysql -u root -p
status

在本机上远程访问服务器上的mySQL,成功

3. 打包并部署后端

安装unzip

代码语言:txt复制
yum install -y unzip zip

在本机上将后端项目压缩成以.zip结尾的压缩文件(注意,如果使用gorm连接mySQL,需要先在mySQL中建库,然后修改后端中的数据库名及密码)

进入workspace_go,输入rz将该压缩文件上传至云端

代码语言:txt复制
cd worksapce_go
rz

解压并运行

代码语言:txt复制
unzip 文件名.zip
go run 主文件名.go

这样后端就成功部署好了

但每次关闭Xshell连接后后端都会停止运行,我们需要用screen命令保存会话内容

安装screen

代码语言:txt复制
yum install screen

创建screen会话(此时要先停止后端运行)

代码语言:txt复制
screen -S 会话名

在新的会话中运行后端,按ctrl a d返回

恢复会话内容

代码语言:txt复制
screen -r 会话名

即可返回之前的对话

这样即时关闭Xshell,后端仍在继续运行

【注意:】

如果忘记了会话名字,可输入该语句查询

代码语言:txt复制
screen -ls

若要删除会话,可输入该语句删除

代码语言:txt复制
screen -S 会话名 -X qiut

若同一个会话名有多个会话,输入该语句删除对应会话(编号可查询得)

代码语言:txt复制
screen -S 编号.会话名 -X quit

(四)nginx安装与前端部署

1. 安装nginx

下载nginx安装包

代码语言:txt复制
cd /usr/local
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz

解压nginx压缩包并打开

代码语言:txt复制
tar -zxvf nginx-1.10.1.tar.gz
cd nginx-1.10.1

配置

代码语言:txt复制
./configure

编译安装并查看安装路径

代码语言:txt复制
make
make install
whereis nginx

配置完成后需进行修改

代码语言:txt复制
vi /usr/local/nginx/conf/nginx.conf

启动、停止nginx

代码语言:txt复制
cd /usr/local/nginx/sbin/
./nginx
./nginx -s stop

重启nginx

代码语言:txt复制
./nginx -s quit
./nginx

【注意:】

如果出现错误:nginx: error open() "/usr/local/nginx/logs/nginx.pid" failed,则输入该语句再运行报错前的语句

代码语言:txt复制
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

设置开机自启动nginx,修改配置文件

代码语言:txt复制
vi /etc/rc.local

在最后一行输入

代码语言:txt复制
/usr/local/nginx/sbin/nginx

保存并设置执行权限

代码语言:txt复制
chmod a x /etc/rc.local 

2. 打包并部署前端

修改前端项目中的src/main.js,修改公网IP

修改vite.config.js,修改相对路径和包限制大小

在终端输入下面语句进行打包

代码语言:txt复制
npm run build

打包完成后我们在项目中可看见一个dist文件夹,将dist文件夹的内容压缩成dist.zip

在Xshell中进入/usr/local/nginx/html

代码语言:txt复制
cd /usr/local/nginx/html

新建一个文件夹,该文件夹名作为最终访问的网址的路径,一般为项目名以便于区分

代码语言:txt复制
mkdir 项目名

进入该文件夹,将dist压缩包上传至云端并解压

代码语言:txt复制
cd 项目名
rz
unzip dist.zip

解压完成后可看到以下内容,前端也部署完成了

在浏览器输入公网IP/项目名即可出现第一个前端页面

关闭Xshell,也能成功交互

(五)总结

部署教程到这里就结束咯,这也是我第一次尝试部署前后端,中途也遇到了许多坑,把过程记下来和大家分享,希望能给小伙伴们提供参考~

0 人点赞