原文链接
Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践。(我是window10专业版安装Docker)
Docker
Docker是一种应用容器引擎技术,类似于虚拟机,不过它的实用性、通用性、便捷性更强,Docker容器可以说就是VM,不过占用资源更少,更轻量,通过操作系统级虚拟化方法,利用更加节省的硬件资源提供给用户更多的计算资源。
Docker容器是Linux 容器的一种封装,由于容器存在独立的运行环境,Docker可以将应用程序和依赖打包容器中,启动容器即可运行程序。
Docker部署
Docker容器配合 GitHub Action、Jenkins、Rancher使用非常的便捷,当然这里说到的是Docker个人部署实践,下面主要说到的是通用前端项目部署方案。
配置nginx
在前端根目录创建 nginx.conf(与package.json同级),具体配置如下,可以根据实际项目调整修改:
server { listen 80 default_server; server_name _; location / { root /usr/share/nginx/html/web; index index.html index.htm; try_files $uri $uri/ /index.html; } # 接口代理示例 # location /api { # proxy_pass http://xxx.com; # proxy_set_header Host $host:$server_port; # proxy_set_header X-Real-IP $remote_addr; # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # proxy_set_header Cookie $http_cookie; # proxy_buffering off; # proxy_cache off; # } }
nginx配置的主要的作用是静态资源代理,同时接口转发。以上的配置是直接再本机运行,如果要在服务器上运行,可以将其中的配置改为:
listen 80; server_name xxx.com;
配置Dockerfile
在根目录创建Dockerfile文件(与package.json同级)
FROM node:latest COPY package.json / RUN npm i --registry=https://registry.npm.taobao.org RUN npm run build FROM nginx:latest # 这里的dist/目录是你的项目打包后的文件目录 COPY ./dist/ /usr/share/nginx/html/ COPY ./nginx.conf /etc/nginx/conf.d/ EXPOSE 80
上面的配置文件非常的简单,主要就是将构建打包,之后安装nginx,复制nginx配置文件,复制打包后的文件,开放80端口。
Docker镜像部署
将项目更新到服务器上,在服务器运行Docker构建命令( 当然也可以再本地构建):
Docker build -t docker/web:v1.0 .
docker/web:v1.0 是镜像名称,特别注意后页面那个点不能省略。
启动容器
docker run -d -p 8080:80 docker/web:v1.0
docker/web:v1.0
是构建镜像时设置的名称,8080:80
代表将nginx的80映射到你服务器的8080端口(注意你服务器的端口是否开放8080,其他端口也可以;如果是本地访问,不用考虑这个)。
镜像启动成功后,浏览器输入localhost:8080
即可访问了。