1.前言
前段时间,自己搞了个阿里云的服务器。想自己在上面折腾,但是不想因为自己瞎折腾而污染了现有的环境。毕竟,现在的阿里云已经没有免费的快照服务了。要想还原的话,最简单的办法就是重新装系统。而一旦重装,之前的搭建的所有环境就都白搭了。
再加上之前本身就想引入docker,所以就打算利用docker容器来部署这次的前端应用。
2.构建前端应用
在打包之前,首先需要一个可正常运行的前端应用。这个可以使用umi或者create-react-app来构建。
3.nginx的默认配置文件
然后需要在项目中加上默认nginx配置文件。
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
4.编写本地构建脚本
4.1. 移除上次的目录和Dockerfile
#!/bin/bash
if [ -d "./dist" ]; then
rm -rf ./dist
fi
if [ -f "./Dockerfile" ]; then
rm -f ./Dockerfile
fi
因为每次更改后dist中的内容肯定与之前不同,其实这一步显得不是那么必要。运行npm的打包命令也会自动清楚该目录。
而清除Dockerfile则是为了防止更新了Dockerfile,而这次却不能得到最新的配置。
4.2. 打包前端应用
执行前端的打包命令,生成静态文件目录。
yarn build
4.3. 生成Dockerfile
echo "FROM nginx:latest" >> ./Dockerfile
echo "COPY ./dist /usr/share/nginx/html/" >> ./Dockerfile
echo "COPY ./default.conf /etc/nginx/conf.d/" >> ./Dockerfile
echo "EXPOSE 80" >> ./Docker