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

这篇具有很好参考价值的文章主要介绍了前后端分离项目(gin+gorm+vue3)腾讯云部署详细教程(Xshell安装及使用,go,mysql,nginx安装及配置)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)服务器购买与配置

1. 购买服务器

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

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

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

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

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

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

2. 重置密码

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

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

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

3. 添加端口

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

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

(二)Xshell安装与使用

1. 安装Xshell

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

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

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

2. 使用Xshell连接服务器

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

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

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

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

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

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

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

1. 安装Go环境

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

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工作目录

cd ~
mkdir workspace_go

配置环境变量并设置代理

vim /etc/profile

在/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

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

执行/etc/profile文件

source /etc/profile

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

cd workspace_go
vi helloworld.go

写入测试程序

package main

import "fmt"

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

运行测试程序

go run helloworld.go

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

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

2. 安装mySQL环境

下载了安装用的Yum Repository

wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

安装mySQL

yum -y install mysql57-community-release-el7-10.noarch.rpm
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://,则执行以下语句再执行报错前的语句

rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022

mySQL安装完成

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

启动mySQL

systemctl start  mysqld.service

查看mySQL运行状态

systemctl status mysqld.service

mySQL正常运行

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

找出root用户的原始密码

grep "password" /var/log/mysqld.log

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

mysql -uroot -p

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

ALTER USER 'root'@'localhost' IDENTIFIED BY 'new password';

开启mySQL远程访问

grant all privileges on *.* to 'root'@'%' identified by 'password' with grant option;
flush privileges; 

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

status;

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

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

exit
vi /etc/my.cnf

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

[client]
default-character-set=utf
character-set-server=utf8
collation-server=utf_general_ci

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

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

service mysqld restart
mysql -u root -p
status

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

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

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

3. 打包并部署后端

安装unzip

yum install -y unzip zip

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

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

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

cd worksapce_go
rz

解压并运行

unzip 文件名.zip
go run 主文件名.go

这样后端就成功部署好了

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

安装screen

yum install screen

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

screen -S 会话名

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

恢复会话内容

screen -r 会话名

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

即可返回之前的对话

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

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

【注意:】

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

screen -ls

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

screen -S 会话名 -X qiut

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

screen -S 编号.会话名 -X quit

(四)nginx安装与前端部署

1. 安装nginx

下载nginx安装包

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

解压nginx压缩包并打开

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

配置

./configure

编译安装并查看安装路径

make
make install
whereis nginx

配置完成后需进行修改

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

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

启动、停止nginx

cd /usr/local/nginx/sbin/
./nginx
./nginx -s stop

重启nginx

./nginx -s quit
./nginx

【注意:】

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

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

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

vi /etc/rc.local

在最后一行输入

/usr/local/nginx/sbin/nginx

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

保存并设置执行权限

chmod a+x /etc/rc.local 

2. 打包并部署前端

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

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

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

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

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

npm run build

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

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

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

cd /usr/local/nginx/html

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

mkdir 项目名

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

cd 项目名
rz
unzip dist.zip

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

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

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

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

关闭Xshell,也能成功交互

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

(五)总结

部署教程到这里就结束咯,这也是我第一次尝试部署前后端,中途也遇到了许多坑,把过程记下来和大家分享,希望能给小伙伴们提供参考~文章来源地址https://www.toymoban.com/news/detail-455476.html

到了这里,关于前后端分离项目(gin+gorm+vue3)腾讯云部署详细教程(Xshell安装及使用,go,mysql,nginx安装及配置)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Nginx同一端口部署多个前后端分离的vue项目

    要用nginx容器部署多个前端项目可以采用监听端口,和基于location配置两种方法, 我的nginx是使用docker部署的,启动的时候没有开多余的端口,所以采用location配置 一个server下根据根路径不同分别代理访问不同项目。 下面操练起来,问:把大象放冰箱?总共需要几步:三步!

    2024年02月02日
    浏览(46)
  • 若依RuoYi-Vue项目部署(前后端分离版本)

    RuoYi 是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。 若依是作者给女儿取的名字(寓意:你若不离不弃,我必生死相依) 在线体验 若

    2023年04月08日
    浏览(54)
  • 【后台部署】Windows服务器部署RuoYi-Vue前后端分离项目

    一、Ruoyi-Vue前后端分离项目结构 二、Redis部署 1、下载Windows版本Redis 2、解压缩到安装目录 3、在安装目录栏输入cmd,按回车键 4、将Redis绑定为 Windows 服务,设置为后台启动 或者 5、常用命令 启动服务 停止服务 卸载命令 6、停止和启动也可以通过页面来操作 右键 此电脑 --管

    2024年02月13日
    浏览(49)
  • Spring Boot+Vue前后端分离项目如何部署到服务器

    🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 🤖 洛可可白 :个人主页 🔥 个人专栏 :✅前端技术 ✅后端技术 🏠 个人

    2024年04月11日
    浏览(61)
  • 通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南(三更)

    阿里云服务器-FinalShell-宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目,并且是分模块开发的项目部署到服务器上,记录一下踩坑的地方,结合C站大佬的解决方案,循循善诱一步步部署到服务器上,简单,快速! 购买服务器,阿里云,腾讯云,华为云等,24周岁

    2024年02月03日
    浏览(63)
  • 【Docker】docker部署springboot+vue+mysql+nginx前后端分离项目【部署实战篇】

    安装docker: https://blog.csdn.net/qq_39900031/article/details/121666892 springboot-vue前后端分离项目:https://gitee.com/ma-haojie/springboot-vue-demo.git https://jackwei.blog.csdn.net/article/details/110227719 或者 --restart=always 参数能够使我们 在重启docker时,自动启动相关容器 。 Docker容器的重启策略如下: no,默认

    2024年02月13日
    浏览(49)
  • Windows服务器,通过Nginx部署VUE+Django前后端分离项目

    基本说明 安装 Nginx 部署 VUE 前端 部署 Django 后端 Django admin 静态文件(CSS,JS等)丢失的问题 总结 本文介绍了在 windows 服务器下,通过 Nginx 部署 VUE + Django 前后端分离项目。本项目前端运行在 80 端口,服务器端运行在 8000 端口。因此本项目使用 Django 的 runserver 命令进行部署

    2024年02月05日
    浏览(63)
  • vue+asp.net Web api前后端分离项目发布部署

    1.前端项目是使用vue脚手架进行创建的。 脚手架版本:@vue/cli 5.0.8 编译器版本:vs code 1.82.2 2.后端是一个asp.net  Core Web API 项目 后端框架版本:.NET 6.0 编译器版本:vs 2022 第一步:在vs code 编译器中的终端窗口输入如下命令,进行前端项目打包。 打包后文件如下所示: 第二步

    2024年02月05日
    浏览(55)
  • [ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署

    Apache Tomcat® - Apache Tomcat 9 Software Downloads https://tomcat.apache.org/download-90.cgi Tomcat的主要特点和功能包括: ①Servlet和JSP容器:Tomcat作为一个Web服务器,可以解释执行Java Servlet和JSP代码,处理HTTP请求和响应,生成动态的Web页面。 ②独立性和易用性:Tomcat是一个独立的服务器,可以

    2024年02月07日
    浏览(59)
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目

    1、Node获取地址 https://nodejs.org/en/download 一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用 node -v/npm -v命令验证是否下载成功 2、设置Node的配置内容 (1)在安装目录下新建两个文件夹命名为node_cache,和node_global: 其中 node_cache 是作为 缓

    2024年02月06日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包