博主介绍：
– 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间，所以会将摸索的内容全面细致记录下来。另外，我更多关于管理，生活的思考会在简书中发布，如果你想了解我对生活有哪些反思，探索，以及对管理或为人处世经验的总结，我也欢迎你来找我。
– 目前的学习专注于Go语言，辅学算法，前端领域。也会分享一些校内课程的学习，例如数据结构，计算机组成原理等等，如果你喜欢我的风格，请关注我，我们一起成长。
Introduction
因为是先写的后端部署，又因为前端和后端的部署类似，也比较简单，我们就加快速度了，我们的前端项目用的是vue项目。
想要了解部署更详细的内容（万字长文），比如Dockerfile文件分为几个部分，命令有哪些需要注意的地方，可以戳右方链接：后端部署具体详解前后端部署具体详解
主要是经历以下几个步骤
- 构建Dockerfile文件
- 通过Dockerfile文件构建镜像
- 通过镜像生成容器，挂载前端项目
- 打包前端项目
- 修改nginx配置文件
Table of Contents
- 构建Dockerfile文件
- 构建镜像
- 根据镜像创建容器
- 打包vue项目
- 修改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;
}
}欢迎评论区讨论，或指出问题。 如果觉得写的不错，欢迎点赞，转发，收藏。
