程序员经验分享-hwhale

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

2023-11-05

项目架构和部署工具

项目工具

  • 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（会话名字忘了，就输入它吧，查查）

（参考链接）

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

gin框架

vue30

腾讯云

Golang

vuejs

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

随机推荐

  • 如何在pycharm上安装tensorflow

    TensorFlow 是一个基于数据流编程 dataflow programming 的符号数学系统 被广泛应用于各类机器学习 machine learning 算法的编程实现 其前身是谷歌的神经网络算法库DistBelief Tensor

  • CMake命令之add_custom_comand 和 add_custom_target

    一 背景 在很多时候 需要在cmake中创建一些目标 如clean copy等等 这就需要通add custom target来指定 而add custom command则可以用来完成对add custom target生成的target

  • 一个变量越界导致破坏堆栈的bug

    前一段时间在商用系统上出现了core dump 原因是由于一个局部变量写越界导致堆栈被破坏了 在这里 我把这个bug分享一下 希望给需要的朋友一点帮助 简化的代码如下 typedef struct A void func1 char p v

  • 投资还是创业？我以亲身经验告诉你真相

    编者按 本文作者徐薇 前创新工场投资总监 现创业中 做女性生活方式社区电商 本文原载于徐薇的个人公众号 人生异想 life essay 授权 36 氪转载 欢迎交流讨论 最近真是很巧 有好几个朋友在考虑做新的事业选择 来找我聊 聊完之后 大

  • 腾讯云学生服务器2核2G和4核8G申请详细流程

    腾讯云学生服务器2核2G和4核8G申请详细流程 学生机申请流程 腾讯云学生服务器优惠活动 轻量应用服务器2核2G学生价30元3个月 58元6个月 112元一年 轻量应用服务器4核8G配置191 1元3个月 352 8元6个月 646 8元一

  • ymPrompt消息提示组件 2.0版

    组件功能介绍 1 调用方式简单 直接使用ymPrompt alert 的方式调用 传入相应的参数即可 2 兼容IE6 0 FF1 5 Opear9 在Opear下显示有一个小缺陷 兼容HTML4 XHTML1 0页面渲染模式 3 完全的CS

  • 图像超分辨率重建原理学习

    原文链接 https blog csdn net gwplovekimi article details 83041627 目录 超分辨率 Super Resolution SR 传统的图像超分辨率重建技术简介 基于插值的图像超分 基于重建

  • JDK20又来了！你还在用JDK8么？

    文章目录 前言 JDK 20发布 JDK20下载 JDK 20新特性 矢量API 虚拟线程 第二次优化 结构化并发 Scoped values 作用域值 记录模式 第二次优化 外部函数和内存API switch语句和表达式的模式匹配 写在最

  • Linux命令+shell脚本大全：shell 的父子关系

    用于登录某个虚拟控制器终端或在GUI中运行终端仿真器时所启动的默认的交互shell 是一 个父shell 本书到目前为止都是父shell提供CLI提示符 然后等待命令输入 在CLI提示符后输入 bin bash 命令或其他等效的 bash

  • 网络编程（三次握手、四次挥手）

    一 Wireshark 窗口介绍 二 wireshark与对应的OSI七层模型 服务器和客户端的代码不能都运行在ubuntu 因为wireshark抓的是流经真实网卡的数据包 若将服务器客户端都运行在ubuntu 数据直接经过虚拟网卡通信

  • Spring cloud Gateway版本升级踩坑总结

    目录 背景 问题及方案 1 Kubernetes pom文件中的依赖包名称不同 2 项目引入 OpenFeign 或者 RestTemplate 启动假死 解决方案有以下三种 1 使用异步方法并且延迟注入 OpenFeignClient 推

  • 什么是机器学习分类算法？【K-近邻算法(KNN)、交叉验证、朴素贝叶斯算法、决策树、随机森林】

    Python微信订餐小程序课程视频 https edu csdn net course detail 36074 Python实战量化交易理财系统 https edu csdn net course detail 35475 1 K 近邻算

  • C++异常处理机制详解

    异常处理是一种允许两个独立开发的程序组件在程序执行期间遇到程序不正常的情况 异常exception 时相互通信的机制 本文总结了19个C 异常处理中的常见问题 基本涵盖了一般C 程序开发所需的关于异常处理部分的细节 1 throw可以抛出哪

  • 区块链概念、原理、特点

    01 区块链概念 区块链可以借由密码学 串接并保护内容的串联交易记录 又称区块 在区块链中 区块内容具有难以篡改的特性 每一个区块都包含了前一个区块的加密散列 相应时间戳记以及交易数据 通常用Hash树计算的散列值表示 用区块链串接的分布式

  • 【问答】区块链遇到Waiting for cache lock: Could not get lock /var/lib/dpkg/lock-frontend. It is heWaiting for

    前言 在日常区块链或是正常的使用中 总是会遇到这个问题 Waiting for cache lock Could not get lock var lib dpkg lock frontend It is heWaiting for cac

  • 微服务化之无状态化与容器化（转载）

    一 为什么要做无状态化和容器化 很多应用拆分成微服务 是为了承载高并发 往往一个进程扛不住这么大的量 因而需要拆分成多组进程 每组进程承载特定的工作 根据并发的压力用多个副本公共承担流量 将一个进程变成多组进程 每组进程多个副本 需要程序的

  • ASP快速入门教程

    ASP快速入门教程 ASP快速入门教程能让你一个小时就学会ASP 如果想看懂更多的ASP代码 希望大家在网上找找ASP教程 相信看完后大家对ASP更有个感性的认识 请熟记下面的ASP语句是你快速入门的不二法则 lt 1 gt lt 2 gt

  • R语言学习：数据结构8-日期和时间

    日期和时间 date time 日期 Date 内部存储的是距离1970 01 01的天数 相关函数 date Sys Date weekdays months quarters 查看日期 date x lt date 查看当前系统日期和时

  • 数据清洗的步骤和注意事项：提高数据分析的准确性和可靠性

    作为一名数据分析师 我深知数据清洗是数据分析的重要一步 数据清洗的质量直接影响到数据分析的准确性和可靠性 在这篇文章中 我将分享一些数据清洗的步骤和注意事项 帮助你提高数据分析的准确性和可靠性 1 确定数据清洗的目标和指标 在开始数据清洗之

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

    腾讯云部署 gin框架 vue3 0 前后端分离项目 项目架构和部署工具 项目工具 部署工具 后端项目准备及部署 购买云端服务器 以下是腾讯云 阿里云请点击我 https blog csdn net it vegetable article

热门标签