阅读 2549

前端部署--基于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我会继续更新的!

                                                                                                                  ---网图侵删

文章分类
前端
文章标签