前后端部署具体详解（Go+Vue+Nginx）

与你相识

博主介绍：

– 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间，所以会将摸索的内容全面细致记录下来。另外，我更多关于管理，生活的思考会在简书中发布，如果你想了解我对生活有哪些反思，探索，以及对管理或为人处世经验的总结，我也欢迎你来找我。

– 目前的学习专注于Go语言，辅学算法，前端领域。也会分享一些校内课程的学习，例如数据结构，计算机组成原理等等，如果你喜欢我的风格，请关注我，我们一起成长。

---

Introduction

在实际的项目中，一般是同时部署前后端，你可以把前端和后端放在两个容器中，但是我总是嫌那样比较麻烦，所以我一般喜欢把前后端放在一个容器里。

实际上，就是把前端部署和后端部署进行一个结合，如果你想详细单个的了解，也可以轻击下面的链接。

• 后端部署具体详解
• 前端部署具体详解

---

---

前后端部署

在前后端的部署中，我们将经历下面的步骤：

• 构建Dockerfile文件
• 通过Dockerfile文件构建镜像
• 通过镜像构建容器
• 在容器中启动后端程序
• 生成nginx容器
• 打包前端项目
• 配置nginx容器

构建Dockerfile文件

这个Dockerfile包含了Go环境和nvm环境

go所需要的工具，以及配置都在里面，nvm我们也下载了。

FROM centos:latest  # 基于centos最新版本镜像
MAINTAINER Yunfei Hu@[email protected]  # 作者标注
 
ENV MYPATH /usr/local/project  # 配置MYPATH路径
WORKDIR  $MYPATH   # 设置WORKDIR为MYPATH（启动容器默认地址为WORKDIR地址，方便操作）

RUN yum -y update \  # 更新yum命令
    && yum -y install vim \  # 下载安装vim
    && yum -y install git \  # 下载安装git
    && yum install -y gcc-c++ \  # 下载安装gcc-c++编译器
    && yum -y install wget \  # 下载安装wget
    && wget -P /root/ https://dl.google.com/go/go1.14.1.linux-amd64.tar.gz \  # 下载go安装包
    && tar -zxvf /root/go1.14.1.linux-amd64.tar.gz -C /usr/local \  # 解压安装包
    && echo export PATH=$PATH:/usr/local/go/bin >> /etc/profile \  # 添加Go环境在环境变量中
    && source /etc/profile && go version \   # 重新编译一下/etc/profile文件（环境变量生效），并且查看一下go版本
        # 在bash每次启动的时候，都会加载.bashrc文件中的内容，也就是每次打开bash(终端)
    # 的时候，都会编译一下/etc/profile文件（环境配置文件）
    && echo "source /etc/profile" >> /root/.bashrc \
    # 设置我们刚刚下载的go编译工具的代理地址（下载速度会变快）
    && go env -w GOPROXY=https://goproxy.cn,direct \
    # 在Go11.1版本之后，go采用go module来代替之前的依赖管理，如果我们想要启用
    # go module的功能，需要设置GO111MODULE,它有三个值，on，off，auto，默认为auto
    # on开启，off关闭，auto则会寻找项目根目录有没有go.mod文件来决定是否开启。
    && go env -w GO111MODULE=on \
    && cd ~/ \
    && git clone https://github.com.cnpmjs.org/nvm-sh/nvm.git .nvm \  # 下载nvm
    && cd ~/.nvm && git checkout v0.35.3 \  # 设置nvm
    && echo "source ~/.nvm/nvm.sh" >> ~/.bashrc && source ~/.bashrc  # 把nvm加到环境变量中
CMD echo "-----end-----"

通过Dockerfile文件构建镜像

通过下面的话就可以把我们刚才创建的Dockerfile文件构建出镜像了，构建出的镜像是centos_go:0.1，名字是centos_go，Tag是0.1代表0.1版本，仅仅是一个标识。

需要注意的是这个Dockerfile文件就是我们刚才创建的Dockerfile文件的路径，如果它在其它地方，要改成对应的路径，或者名字有所更换，也要换成对应的名字。

docker build -f Dockerfile -t centos_go:0.1 .

然后可以通过docker images来查看一下是否已经创建成功

通过镜像构建容器

通过我们前面构建的centos_go:0.1这个镜像来生成容器，名字是centos_go。

通过-v来挂载我们的项目地址（我打算将前后端项目放到project中），如果你想放到其它的地方，自己根据情况进行修改即可。

docker run -it -v /root/project:/usr/local/project --name centos_go centos_go:0.1 /bin/bash

在容器中启动后端程序

进入到/root/project中，也就是我们刚才挂载的路径，/root/project这个路径和容器中/usr/local/project是映射关系，也就是说我们把后端项目放在/root/project中，容器的/usr/local/project也会自动添加，然后在项目目录中执行下面的命令。

它可以把main.go文件编译成可执行文件，这样我们就可以通过这个可执行文件来运行了。 需要注意main.go是你项目的main文件所在位置。

go build main.go

此时我们会在当前目录得到一个main的可执行文件，然后就可以通过下面的命令不挂断的在后台运行main程序了。
“>”是把显示的内容覆盖到右边的作用，也就是说它会把运行的结果追加到start.log中。
2 > &1的意思是如果报错了，把报错结果打印出来。 2表示标准错误，1表示标准输出，2>&1就是把标准错误追加显示到标准输出（终端）中。
最后的&是表示该命令将以后台的job形式运行，可以通过jobs -l来查看当前所有的job

nohup ./main > start.log 2>&1 &

生成nginx容器

如果你没有生成过nginx容器的话，我们需要先经过下面的步骤把nginx镜像下载下来，并生成一个临时nginx容器，把配置文件复制出来。

1. 下载nginx镜像

docker pull nginx

2. 启动测试容器（先不挂载镜像）

docker run --name nginx-test -d nginx

3. 复制配置文件nginx.conf

mkdir /root/nginx
docker cp nginx-test:/etc/nginx/nginx.conf /root/nginx/
docker cp nginx-test:/etc/nginx/conf.d /root/nginx/

4. 删除测试容器

docker stop nginx-test
docker rm nginx-test

此时我们已经得到了配置文件，我们就可以生成一个正式nginx容器了

挂载了四个地方，第一个是前端项目的地址，第二个和第三个是nginx的配置文件，第四个是log文件地址。

docker run -it --name nginx --net host -v /root/project:/var/www/html -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf -v /root/nginx/conf.d:/etc/nginx/conf.d -v /root/nginx/logs:/var/log/nginx -d nginx

打包前端项目

如果你细心的话，会发现我们创建nginx容器的时候，最后没有/bin/bash，我们就需要用下面的命令来进入这个容器了

docker attach exec -it nginx /bin/bash

进入容器之后，在项目中使用下面命令打包前端项目（也可以在外面的挂载路径中打包前端项目）

npm run build

配置nginx容器

下面nginx配置文件的意思就是当访问38.5.15.5的时候，会去/var/www/html/dist下面找到前端项目，当访问38.5.15.5/api的时候，会访问172.17.0.5:8000（这个是我们后端项目运行的那个容器的ip地址）。

这样的话，我们只需要访问服务器ip38.5.15.5:80，就会直接访问到我们的前端静态页面了，当访问38.5.15.5:80/api的时候，就可以由nginx转发访问到后端接口了。

upstream myserver {
    server 172.17.0.5:8000;  # 后端请求的地址，因为我们的后端部署在一个容器中，而容器的ip地址是172.17.0.5，api的端口是8000，所以要这样写。
    # 如果还有的话，可以继续往下写
    # server XXXX;
    # server XXXX;
}

server {
    listen 80;
    client_max_body_size 20m;
    server_name 38.5.15.5;  # 你的服务器地址

    location / {
        root   /var/www/html/dist;
        try_files $uri $uri/ /index.html?s=$uri&args;
        index index.html index.htm index.php;
    }

	location /api {  # 如果访问38.5.15.5/api为前缀的话，就会进入到这一块
        proxy_pass http://myserver;    # 被转发到172.17.0.5:8000  
        index index.html index.htm;
    }
}

---

欢迎评论区讨论，或指出问题。 如果觉得写的不错，欢迎点赞，转发，收藏。