前端部署--基于nginx和docker

部署---前端小菜鸡翻身第一步

首先列一下我部署需要的环境,准备好这些应该就ok啦

• Ubuntu 18.04 64位
• Docker version 19.03.13
• node v14.15.1

准备好环境之后就可以开始部署啦

docker pull nginx

将nginx镜像拉到本地仓库

docker images

列出本地主机上面的镜像

走到这步那基本的环境就基本配好了，我们接下来的任务是将一个，将一个简单的html文件打包成一个docker镜像。

• 创建一个文件夹 mkdir DockerTest
• 在文件夹里面创建两个文件 vim index.html \ vim DockerFile 解释一下这两个文件html文件写入你静态网页的内容，Dockerfile文件则是docker的打包命令

Dockerfile里面写入如下代码 index.html自己随便写点就OK了

FROM nginx

COPY ./index.html /usr/share/nginx/html/index.html

EXPOSE 80

简单解释一下这个文件的意思

• FROM nginx：基于哪个镜像

• COPY ./index.html /usr/share/nginx/html/index.html：将主机中的./index.html文件复制进容器里的/usr/share/nginx/html/index.html 如果对此有问题的同学可以看一下下nginx的基本配置

• EXPOSE 80：容器对外暴露80端口

完成到这步ok，看一下目录结构

打包镜像

在此目录下

docker image build ./ -t docker-test:1.0.0 运行Docker脚本打包文件成一个镜像镜像名要用小写

执行命令之后输入 docker images 查看镜像文件是否生成

看到镜像打包好了之后就可以依据该镜像生成容器了

docker container create -p 3000:80 docker-test:1.0.0

docker container start xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

完成后输入docker ps

可以看到基于docker-test镜像容器已经运行在3000端口了，接下来输入你的公网ip地址:3000 查看

如果打不开那就检查一下服务器的防火墙有没有开，还有如果是用云服务器的话需要配置一下安全组规则，给3000端口访问的权限，因为云服务器默认是没有这个端口的访问权限的。这几步搞定肯定就能显示内容啦！

做到这里恭喜你，成功已经近在眼前了！单单一个静态页面完全没有意思啊，我们得把我们的前端项目放上去，并且可以和后端进行交互才算走完一个基本流程。

基于antd pro部署

• 首先准备一个自己的前端的项目，我就拿一个antd pro脚手架来做记录
• 把项目建好上传到github，然后再拉下来
• 执行 npm run build 将项目打包好，umi3是打包到根目录到dist文件夹里面 (服务器里面需要安装好高版本的node，这里推荐用nvm做node版本管理)

打包完成后进入根目录新建成一个Dockerfile文件在里面写入

FROM nginx:latest //镜像
MAINTAINER lavie //作者名字写你自己的就好了
COPY default.conf /etc/nginx/conf.d/default.conf  //引入nginx的配置文件?代码
COPY dist/ /usr/share/nginx/html/

然后在新建一个default.conf文件在根目录如下

server {
    listen 80;

    root /usr/share/nginx/html;
    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api.test/ {              
        proxy_pass xxxxxxxxxxx; #后端地址写写你们后端的就行了
        proxy_set_header Host $host;
    }
   
} #比如你在umi-request里面写/api.test/study/major/list
  #那么上面这几个语句就会帮你转到proxy_pass/study/major/list

ok文件写好了，是不是其实和上面那个静态文件一样呢，我们来打包看看效果

打包过程和上面一模一样，我就直接上图了

可以看到容器运行在3001端口了，打开看一下

OK没问题 看一下接口

那必然是可以滴

走到这里似乎前端使用docker和nginx进行部署最最基本滴操作也算完成啦，哈哈是不是很简单，毕竟工科，项目运行起来当然是最重要的一步，以后更多的docker和nginx我会继续更新的！

                                                                                                                  ---网图侵删