腾讯云部署（gin框架+vue3.0）前后端分离项目

项目架构和部署工具

项目工具

  • gin框架
  • vue3.0
  • Postgresql 13.0

部署工具

  • Xshell
  • 腾讯云或阿里云（centos系统7或8都行）

后端项目准备及部署

购买云端服务器（以下是腾讯云，阿里云请点击我）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
由于我已经买过了可能出现与第一次购买不一样的界面，点击购买以后，会让你进行配置，选择centos7或8都行，其他选择保持默认即可

配置服务器

1. 设置服务器密码（服务器账号默认为root），点击重置密码，直接进行重置密码即可，此处密码设置要求极其复杂，需按要求进行设置，切记！这个密码不能忘
在这里插入图片描述

2.配置安全组

  1. 点击安全组，进入配置安全组界在这里插入图片描述
  2. 点击添加规则，安全组中自带一些默认端口号在这里插入图片描述
  3. 配置安全组，将自己所需要的端口号都添加在其中（个人使用来源一般填写0.0.0.0/0），Postgresql的端口号为5432，前端端口号：8080（我的是8080），后端端口号等等（面对这个gin框架+vue3.0的部署，只需要数据库端口号，前后端端口号＋安全组默认配置的端口号）
    在这里插入图片描述
    （配置完安全组后，若在后续运行中出现问题可能是新建的规则未生效，可以将云端服务器进行一次重启进行排查）

Xshell的安装及使用

  1. 下载请点击https://www.netsarang.com/zh/xshell/

  2. 由于是个人使用，请点击旁边的免费授权界面，然后填上邮箱，他就会将下载连接发送到你的邮箱，填邮箱的下面会有三个选择，其中的Xftp是用来将本地文件上传到云端界面的一个工具，根据自己需求下载，也可以使用rz进行将本地服务器文件上传到云端，安装教程链接如下https://blog.csdn.net/jerry010101/article/details/87925777
    在这里插入图片描述

  3. 安装完成以后，我们就需要将Xshell登录远端服务器，打开Xshell，点击新建窗口
    在这里插入图片描述

  4. 名称根据自己的喜好填写，主机需要填写服务器的公网IP，端口号默认22，如果你对端口号进行了修改，需要在安全组中添加刚修改的的端口号，完成以上操作后点击连接在这里插入图片描述

  5. 输入账号（默认账号为root）在这里插入图片描述

  6. 输入你设置的那个复杂的密码，建议将记住用户名和密码全部勾上，下次登录时候双击侧边窗口即可
    在这里插入图片描述

  7. 登录成功在这里插入图片描述

安装go语言并搭载环境

  1. 下载到/usr/local位置并解压
    cd /usr/local
wget https://studygolang.com/dl/golang/go1.13.linux-amd64.tar.gz
tar -xzvf go1.13.linux-amd64.tar.gz
  2. 在$HOME位置创建go工作目录
    cd
mkdir workspace_go
  3. 配置环境变量并设置代理
    vim /etc/profile

    export GOROOT=/usr/local/go
export PATH=$PATH:$GOROOT/bin
export GOPATH=$HOME/go
export GO111MODULE=auto
export GOPROXY=https://goproxy.cn,direct

    source /etc/profile
    配置在这个地方哈在这里插入图片描述
  4. 对环境配置进行测试，打开workspace_go，创建一个hello world程序
    vi hellowoorld.go

    package main

import "fmt"

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

    go run main.go
    出现以下内容，表示环境配置成功，到这go语言就安装完成了
    在这里插入图片描述

安装Postgresql 13.0

  1. 安装数据库

    sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-8-x86_64/pgdg-redhat-repo-latest.noarch.rpm
sudo yum -qy module disable postgresql
sudo yum install -y postgresql13-server

  2. 初始化数据库

    sudo /usr/pgsql-13/bin/postgresql-13-setup initdb

  3. 启动pgsql服务及pgsql服务自启动

    sudo systemctl start postgresql-13
sudo systemctl enable postgresql-13

  4. 修改默认的postgres账户密码（此处密码建议设置成后端程序中连接数据库的密码）

     sudo passwd postgres

  5. 更换账户postgres登录centos

    su - postgres

  6. 修改密码，将newpassword修改成你的数据库密码（此处密码必须设置成后端程序中连接数据库的密码，否则连接不到数据库，又要再次修改）

    psql -d template1 -c "ALTER USER postgres WITH PASSWORD 'newpassword';"

  7. 登录psql管理端

     psql postgres

    PS:以后进入数据库进行操作只用执行第5步和第7步

  8. 配置PostgreSql可以远程访问，在安全组中添加数据库端口号，前面配置服务器处已配置，若未配置请重新回看配置服务器

  9. 修改pg_hba.conf

    vi /var/lib/pgsql/13/data/pg_hba.conf

    找到文件内容最底部，根据图片修改即可（先按Esc在输入:wq，保存并退出）
    在这里插入图片描述

  10. 修改postgresql.conf

    vi /var/lib/pgsql/13/data/postgresql.conf

    将箭头所指出换成*即可（先按Esc在输入:wq，保存并退出）
    在这里插入图片描述

  11. 重启PostgreSql

    sudo systemctl restart postgresql-13

    到这数据库就安装完成了，记得往里面建库插表哦！！！

部署后端

  1. 在本机中将后端项目文件压缩成以.zip结尾的文件
  2. 在Xshell中输入rz，将本地压缩的后端文件传至云端
  3. 安装unzip，并解压文件
    yum install -y unzip zip

    unzip 文件名.zip
  4. 然后在Xshell中用运行后端就完成了，后端的部署就完成了
    go run 主文件名.go

前端项目准备及部署

安装nginx

  1. gcc 安装

yum install gcc-c++

  1. PCRE pcre-devel 安装

yum install -y pcre pcre-devel

  1. zlib 安装

yum install -y zlib zlib-devel

  1. OpenSSL 安装

yum install -y openssl openssl-devel

  1. 下载nginx压缩包

wget -c https://nginx.org/download/nginx-1.10.1.tar.gz

  1. 解压nginx压缩包并打开

tar -zxvf nginx-1.10.1.tar.gz
cd nginx-1.10.1

  1. 配置（默认配置）

./configure

  1. 编译安装并查看安装路径

make
make install
whereis nginx（查看路径）

  1. 配置完成需进行一次修改

vi /usr/local/nginx/conf/nginx.conf

在这里插入图片描述

将箭头所指地方换成公网ip，并且80端口号最好留给nginx，若被占用请进行更改并配置安全组，root后面的内容就为前端打包后dist的存放位置
在这里插入图片描述

  1. 启动、停止nginx

cd /usr/local/nginx/sbin/
./nginx （启动）
./nginx -s stop（停止）

  1. 重启nginx

./nginx -s quit
./nginx

  1. 开机自启动nginx

vi /etc/rc.local

在末尾加上一行箭头所指内容/usr/local/nginx/sbin/nginx
在这里插入图片描述
13. 设置执行权限

chmod 755 rc.local

打包vue项目并部署到前端

修改vue项目部分配置

  1. 首先src中main.js，将箭头所指出更换成公网IP
    在这里插入图片描述
  2. config中的index.js将箭头所指的地方进行修改（箭头顺序从上到下）
    第一个箭头将’/‘改为’./’
    第二个箭头将’localhost’改为’公网IP’
    第三个箭头将端口号改为你为前端留的端口号，可以与后端相同，安全组中一定得有，没有得新建规则
    第四个箭头将’/‘修改为’./’
    在这里插入图片描述
    在这里插入图片描述
  3. build中的utils.js将箭头所指的地方进行修改（此处修改可以将按钮和图片解决在网页无法显示的问题）
    在这里插入图片描述

打包vue项目并部署

  1. 打包vue3.0项目，在文件项目终端中执行npm run build语句，执行完成以后会形成一个dist文件，用浏览器打开红色箭头所指地方，出现第一个自己设定的界面（同时可以再Xshell中运行后端，来测试前后端交互是否成功），则打包成功
    在这里插入图片描述
  2. 同样的将dist压缩传递给云端，在云端服务器中进行解压，将解压后的dist文件移动到root后面的文件夹中（一般都在/usr/local/nginx/html）
    在这里插入图片描述
    若还有问题点击我，常见的前端打包问题
  3. 在浏览器中输入公网IP/dist(dist是可以更改的，取决你放入的文件夹名)，到此任务就完成了

screen命令

你以为结束了，并没有！！！当你关闭Xshell时，你会发现后端程序就会暂停运行了，又得重新打开Xshell运行后端，而我们部署的结果就是为了让程序长久运行，因此我们要用到screen命令

  1. 安装screen

yum install screen

  1. 创建screen会话（一定要先停止后端运行哦）

screen -S lnmp（lnmp是屏幕名字，可以随便更改）

  1. 返回上一个屏幕，暂时离开，会保留screen会话中的任务或程序（这就是我们的目的，让它永远的运行下去）

Ctrl+a d

  1. 恢复screen会话（到这部署就结束了，想学习更多screen命令请点击参考链接！）

screen -r lnmp（lnmp会话名字）
screen -ls screen（会话名字忘了，就输入它吧，查查）

（参考链接）

好了，按照以上步骤部署就完成了，第一次部署可能会遇到很多意想不到的问题，使用百度，会是一个很好地选择！这是博主第一次写博客，若有不对的地方，请多多指教

# 腾讯云 # golang # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue