博主介绍:

– 本人是普通大学生一枚,每天钻研计算机技能,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;
    }
}

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