部署---前端小菜鸡翻身第一步
首先列一下我部署需要的环境,准备好这些应该就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我会继续更新的！
---网图侵删
