# gin-vue

**Repository Path**: zhiqi-wang/gin-vue

## Basic Information

- **Project Name**: gin-vue
- **Description**: gin+vue搭建个人网站
- **Primary Language**: Go
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2022-07-07
- **Last Updated**: 2025-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Gin, Vue, Vuex

## README

# gin-vue



### 安装教程

#### 1.首先安装docker和docker-compose 
<br/>

   1. 安装前的清理
```
    sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine
 

    2. 安装docker依赖

    sudo yum install -y yum-utils device-mapper-persistent-data lvm2


    3. 将镜像源设置为aliyun
    sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
    注意：安装时可以报出containerd.io版本过低的情况，解决方法建议先安装高版本的containerd.io然后执行docker安装命令
    yum install --allowerasing  https://download.docker.com/linux/centos/8/x86_64/stable/Packages/containerd.io-1.4.3-3.1.el8.x86_64.rpm

    4. 安装docker
    sudo yum install -y docker-ce docker-ce-cli containerd.io --nobest 

    5. 设置开机自启动
    systemctl enable docker.service

    6. 启动docker
    systemctl start docker.service 
``` 

<br/>

#### 2. git clone https://gitee.com/zhiqi-wang/gin-vue.git  
<br/>

#### 3.  cd gin-vue
<br/>

#### 4.  根据修改配置文件
   
   1. web/.docker-compose/nginx/conf.d/my.conf（nginx配置文件）
```conf
   server {
    charset utf-8;
    listen       3000;
    server_name  你的主机ip;

    location / {
        root /usr/share/nginx/html;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        try_files $uri $uri/ /index.html;
        proxy_set_header Host $http_host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://你的主机ip:8080; # 设置代理服务器地址,端口号为后端服务启动端口号
    }
    location /swagger/index.html {
        proxy_pass http://127.0.0.1:8080/swagger/index.html;
        }
    }

```

    2. web/Dockerfile（前端docker配置文件）
```docker
    #声明镜像来源为node:16.14.2
    FROM node:16.14.2

    #声明工作目录
    WORKDIR /home/gin_vue_web/

    #将整个web工作目录拷贝到当前工作目录
    COPY . .

    #通过 yarn 生成打包文件
    RUN yarn && yarn build

    # 声明镜像来源为nginx:alpine, alpine 镜像小
    FROM nginx:alpine

    # 镜像编写者及邮箱
    LABEL MAINTAINER="1124045803@qq.com"

    # 从.docker-compose/nginx/conf.d/目录拷贝my.conf到容器内的/etc/nginx/conf.d/my.conf
    ADD .docker-compose/nginx/conf.d/my.conf /etc/nginx/conf.d/my.conf

    # 从第一阶段进行拷贝文件
    COPY --from=0 /home/gin_vue_web/dist /usr/share/nginx/html

    # 查看/etc/nginx/nginx.conf文件
    RUN cat /etc/nginx/nginx.conf

    # 查看 /etc/nginx/conf.d/my.conf
    RUN cat /etc/nginx/conf.d/my.conf

    # 查看 文件是否拷贝成功
    RUN ls -al /usr/share/nginx/html

    ```

    3. server/Dockerfile（后端docker配置文件）
    ```
    # 声明镜像来源为golang:alpine
    FROM golang:alpine as builder

    # 声明工作目录
    WORKDIR /home/go/src/gin_vue_server

    # 拷贝整个server项目到工作目录
    COPY . .

    #在linux环境下进行编译,配置源,打包生成文件夹为server的二进制文件
    RUN go env -w GO111MODULE=on \
        && go env -w GOPROXY=https://goproxy.cn,direct \
        && go env -w CGO_ENABLED=0 \
        && go env -w GOOS=linux \
        && go env -w GOARCH=amd64 \
        && go env \
        && go mod tidy \
        && go build -o server .

    # 声明镜像来源为alpine:latest
    FROM alpine:latest

    # 镜像编写者及邮箱
    LABEL MAINTAINER="1124045803@qq.com"

    # 声明工作目录
    WORKDIR /home/go/src/gin_vue_server

    # 把/go/src/gin_vue_server整个文件夹的文件到当前工作目录
    COPY --from=0 /home/go/src/gin_vue_server ./

    #生成环境下会出现mysql无法识别时区的情况，用apk安装tzdata解决这个问题
    RUN apk update && apk add tzdata

    #运行端口
    EXPOSE 8080

    #执行二进制文件
    ENTRYPOINT ["./server"]

```

    4. docker-compoes.yaml
```yaml
    version: "3.8"
    networks:
    network:
        ipam:
        driver: default
        config:
            - subnet: '177.7.0.0/16'

    # 设置mysql，redis持久化保存
    volumes:
    mysql:

    services:
    web:
        build:
        context: ./web
        dockerfile: ./Dockerfile
        container_name: gin-vue-web
        restart: always
        ports:
        - '3000:80'
        depends_on:
        - server
        command: [ 'nginx-debug', '-g', 'daemon off;' ]
        networks:
        network:
            ipv4_address: 177.7.0.11

    server:
        build:
        context: ./server
        dockerfile: ./Dockerfile
        container_name: gin-vue-server
        restart: always
        ports:
        - '8080:8080'
        depends_on:
        - mysql
        links:
        - mysql
        networks:
        network:
            ipv4_address: 177.7.0.12

    mysql:
        image: mysql:5.7.37
        container_name: gin-vue-mysql
        command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci #设置utf8字符集
        restart: always
        ports:
        - "3306:3306"  # host物理直接映射端口为3306
        environment:
        MYSQL_DATABASE: 'xxx' # 初始化启动时要创建的数据库的名称
        MYSQL_ROOT_PASSWORD: 'xxx' # root管理员用户密码
        volumes:
        - mysql:/var/lib/mysql
        networks:
        network:
            ipv4_address: 177.7.0.13

```
<br/>

#### 5. 启动  
docker-compose -f docker-compose.yaml up --build -d