Docker前端部署详解（Vue+Nginx）

与你相识

博主介绍：

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

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

---

Introduction
因为是先写的后端部署，又因为前端和后端的部署类似，也比较简单，我们就加快速度了，我们的前端项目用的是vue项目。

想要了解部署更详细的内容（万字长文），比如Dockerfile文件分为几个部分，命令有哪些需要注意的地方，可以戳右方链接：后端部署具体详解
前后端部署具体详解

主要是经历以下几个步骤

• 构建Dockerfile文件
• 通过Dockerfile文件构建镜像
• 通过镜像生成容器，挂载前端项目
• 打包前端项目
• 修改nginx配置文件

---

---

构建Dockerfile文件

前端的部署比较关键的一点就是nvm了，nvm可以对node版本进行管理，因为不同的前端项目可能会用不同版本的node，它们的兼容性可能是不一样的，而nvm可以解决这个问题，它可以方便在同一台设备上进行多个node版本之间的切换。

# 依赖centos环境
FROM centos:latest

#安装vim、git和nvm环境
RUN yum -y update \
    && yum -y install vim \  # 安装vim，可能会有在容器内修改文件的需求
	&& yum -y install git \  # 在容器中安装git
	&& git --version \  # 查看一下git版本
	&& 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

构建镜像

通过docker images可以查看我们创建的centos_git_nvm镜像

docker build -f Dockerfile -t centos_git_nvm .

根据镜像创建容器

挂载的是前端项目文件

docker run -it --name centos_git_nvm_node -v /root/project:/project -d centos_git_nvm 

打包vue项目

在项目目录中，使用npm run build打包项目，会有一个dist文件夹，复制到/root/project项目目录即可

如果npm run build报错的话，可能是有一些包没有安装上，导致命令出错，可以尝试使用npm install命令来安装一下项目涉及的依赖。

修改nginx配置文件

可以参考后端部署的nginx容器搭建步骤，搭建一个nginx容器，稍有不同的是，创建容器的时候，需要多挂载一个前端项目目录，我们把dist文件放到/root/project下了，与nginx中的目录对应一下，然后nginx就可以访问到了。

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

然后把配置文件改成如下

下面配置文件的作用是，当访问38.5.15.5:80的时候，会去nginx服务器中/var/www/html/smartfront/中找到dist打包项目，就可以正常的访问前端项目了。

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

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

    location / {
        root   /var/www/html/smartfront/dist;	# 前端项目打包文件路径
        try_files $uri $uri/ /index.html?s=$uri&args;
        index index.html index.htm index.php;
    }
}

---

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