服务器部署gin+vue前后端分离项目

yyue_lalala
297 阅读4分钟

问题

在服务器部署上gin+vue前后端分离项目：

  1. 配置好环境，包括docker、redis、mysql、nginx
  2. 打包后端，上传服务器，部署
  3. 部署前端
  4. 运行

下面的内容不全是按照这个顺序进行的，主要记录了我在部署过程中遇到的问题，可以根据目录查找。

✌️希望可以帮到你

服务器

腾讯云服务器root用户创建

腾讯云服务器获取root权限（ubuntu系统）_腾讯云创建好容器怎么查看root密码-CSDN博客

服务器上安装docker

云服务器 搭建 Docker-实践教程-文档中心-腾讯云 (tencent.com)

ubuntu安装mysql

  1. 更新系统包列表：打开终端，输入以下命令来更新你的Ubuntu系统的包列表：

    sudo apt update

  2. 安装MySQL服务器： 使用以下命令安装MySQL 8.0：

    sudo apt install mysql-server

  3. 配置MySQL： 安装完成后，运行安全安装脚本来设置密码和改进安全性：

    这个脚本会引导你设置root用户密码、移除匿名用户、禁止root远程登录以及删除测试数据库等。

    sudo mysql_secure_installation

    一般默认开启auth_socket方式，要使用用户名和密码，执行

    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的新密码';
FLUSH PRIVILEGES;

  4. 验证MySQL服务状态： 确认MySQL服务已经启动，可以使用以下命令：

    sudo systemctl status mysql.service

  5. 如果服务没有运行，使用以下命令启动它：

    sudo systemctl start mysql.service

  6. 登录MySQL数据库： 安装完成后，使用以下命令登录到MySQL数据库：

    sudo mysql -u root -p

  1. 运行sql文件

    mysql -u username -p database_name < file.sql

下载Docker Compose

  1. 卸载当前的 Docker Compose：

    sudo apt remove docker-compose

  2. 重新安装 Docker Compose：

    sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

  3. 确认安装成功：

    docker-compose --version

  4. 如果启用docker compose时，找不到，-bash: /usr/bin/docker-compose: No such file or directory，需要加到环境变量里（在下面），还要修改权限（在下面）

安装redis

安装Redis：

sudo apt install redis-server

验证Redis是否安装成功： Redis服务默认情况下会自动启动。你可以通过运行以下命令来检查Redis服务器的状态：

sudo systemctl status redis

如果Redis正在运行，你应该会看到一个状态表明它是“active (running)”。

测试Redis： 使用redis-cli工具测试Redis服务器：

redis-cli

在redis-cli中，尝试执行一个简单的命令，例如：

ping

如果Redis服务正在运行，你会得到一个“PONG”作为响应。

配置Redis（可选）： Redis的配置文件位于/etc/redis/redis.conf。你可以编辑这个文件来调整配置，例如持久化选项、密码设置等。

  • 为了使更改生效，每次修改配置后都需要重启Redis服务：

    sudo systemctl restart redis

后端

go项目怎么在windows下打包成在linux中的可运行文件

  1. 下载mingw64

    github.com/niXman/ming…

    posix-seh版本

    POSIX 线程模型更符合 UNIX/Linux 标准，通常用于需要较好兼容性的场合。SEH (Structured Exception Handling) 是 Windows 特有的异常处理机制，通常提供更好的错误处理能力。

  2. 在当前环境，把mingw64的bin文件夹加入到PATH环境变量

    $env:PATH = "E:\Environment\mingw64\bin;" + $env:PATH

    检验gcc是否可用：

     gcc --version

  3. 编译 uisApp是名称，可改

    $env:GOOS="linux"; $env:GOARCH="amd64"; go build -o uisApp  

  4. 如果报错

    PS D:\UISwebsite\backend> $env:GOOS="linux"; $env:GOARCH="amd64"; go build -o uisApp
# runtime/cgo
gcc_linux_amd64.c: In function '_cgo_sys_thread_start':
gcc_linux_amd64.c:57:9: error: unknown type name 'sigset_t'; did you mean '_sigset_t'?
   57 |         sigset_t ign, oset;
      |         ^~~~~~~~
      |         _sigset_t
gcc_linux_amd64.c:62:9: error: implicit declaration of function 'sigfillset' [-Werror=implicit-function-declaration]
   62 |         sigfillset(&ign);
      |         ^~~~~~~~~~
gcc_linux_amd64.c:57:23: error: unused variable 'oset' [-Werror=unused-variable]
   57 |         sigset_t ign, oset;
      |                       ^~~~
cc1.exe: all warnings being treated as errors

    禁用CGO

    $env:CGO_ENABLED="0";

  5. 项目根目录会生成一个app的可执行文件。使用./app就可以直接运行

    app的配置文件（静态文件）要单独上传

跨域问题

如果前端成功发送了请求，后端也接收到了，但是前端没收到响应，那就是跨域的问题，要在后端配置CORS

go get -u github.com/gin-contrib/cors

import (
    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)
​
func main() {
    router := gin.Default()
    
    // 配置 CORS
    router.Use(cors.New(cors.Config{
        AllowOrigins:     []string{"http://101.42.183.175"}, // 或 "*" 允许所有域
        AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},
        AllowHeaders:     []string{"Origin", "Content-Type", "Accept", "Authorization"},
        ExposeHeaders:    []string{"Content-Length"},
        AllowCredentials: true,
        AllowOriginFunc: func(origin string) bool {
            return origin == "http://101.42.183.175" // 或使用 "*" 来允许所有源
        },
        MaxAge: 12 * time.Hour,
    }))
​
    // 其他路由配置
    router.GET("/api/auth", someHandlerFunction)
​
    router.Run(":8000")
}

Docker

但是实际上没有成功用docker部署，有问题还要查

Dockerfile中的基础镜像

在Dockerfile里必须写基础镜像，但是直接使用./uisApp开启后端的话，已经在本地编译成一个独立的二进制文件，不依赖于 Go 运行时或其他 Go 库，实际上用不到基础镜像，（但是需要写一个，可以写FROM ubuntu:latest）

一般Go的基础镜像会使用golang:alpine

docker代理

国内无法拉取Docker镜像了？这些方法拯救你的Docker-腾讯云开发者社区-腾讯云 (tencent.com)

试了很多代理都不行，使用这个链接里的代理可以正常拉取了

dockerfile相关

目录问题
 => ERROR [4/4] COPY /opt/uisApp /app/                                                                                                                                                       0.0s
------
 > [4/4] COPY /opt/uisApp /app/:
------
Dockerfile:13
--------------------
  11 |     
  12 |     # 将二进制文件从构建上下文复制到容器内
  13 | >>> COPY /opt/uisApp /app/
  14 |     
  15 |     # 使你的应用成为容器启动的默认程序
--------------------
ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref 8dc80e4e-3b4d-406c-bf71-5fd1526ca9d2::qgnqipdd3s5z3zrit93wqt1w8: "/opt/uisApp": not found

目录是基于当前dockerfile所在目录的相对路径，也就是要在当前的app目录里的/app/opt/uisApp找文件

修改后端配置文件

如果一个服务运行是基于另一个服务的，如后端基于mysql，需要修改后端配置文件中的mysql，由127.0.0.1:3306改为mysql80（基于下面的文件）

version: '3.8'
services:
  uisapp:
    image: uisapp-image
    depends_on:
      - mysql80
    ports:
      - "8000:8000"
    environment:
      MYSQL_HOST: mysql80
      MYSQL_USER: root
      MYSQL_PASSWORD: 123456
      MYSQL_DB: uis
​
  mysql80:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 123456
      MYSQL_DATABASE: uis
    volumes:
      - uis-data:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
    ports:
      - "3306:3306"
​
volumes:
  uis-data:

前端

怎么把vue项目部署到服务器

  1. 改项目里的axios配置（在main.js里加）

    axios.defaults.baseURL = 'http://服务器IP:8000/api';

  2. 下载nginx

    sudo apt update
sudo apt install nginx

  3. 在 /etc/nginx/sites-available 下创建一个新的配置文件，例如your_project.conf，并配置如下：

    server {
    listen 80;
    server_name your_server_domain_or_IP;
​
    location / {
        root /path/to/your/dist;
        try_files $uri $uri/ /index.html;
    }
​
    location /api {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

  4. 启用站点并重启Nginx：（名字一定要对应）

    sudo ln -s /etc/nginx/sites-available/your_project.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

命令

Windos命令

查看进程并删除

netstat -ano | findstr :8080
taskkill /PID <进程ID> /F

docker命令

创建数据卷

使用数据卷可以进行数据持久化。即使容器被删除，数据也会保留在数据卷中。如果需要恢复或迁移数据，只需将同一个数据卷挂载到新的 MySQL 容器即可。

docker volume create mysql-data

运行mysql容器

docker run -d \
  --name mysql80 \
  -e MYSQL_ROOT_PASSWORD=my-secret-pw \
  -v mysql-data:/var/lib/mysql \
  -p 3306:3306 \
  mysql:8.0

mysql-data就是前面创建的数据卷，挂载到 容器的 /var/lib/mysql 目录，这是 MySQL 默认存储数据的位置。

image-20241105102411079

启用Docker Compose

docker-compose up -d

linux命令

环境变量

  1. 查看PATH环境变量

    echo $PATH

  2. 添加环境变量（/usr/local/bin是要添加的，可变）

    export PATH=$PATH:/usr/local/bin

  3. 使其生效

    source ~/.bashrc

修改权限

sudo chmod +x /usr/local/bin/docker-compose

查看，终止进程

sudo lsof -i :8080
sudo kill -9 <PID>

防火墙

sudo ufw status
sudo ufw allow 8000

nginx

启动

sudo systemctl start nginx

重启

sudo systemctl restart nginx

查看状态

sudo systemctl status nginx

检查语法

sudo nginx -t
avatar
文章
阅读
粉丝