You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践。(我是window10专业版安装Docker)
Docker
Docker是一种应用容器引擎技术,类似于虚拟机,不过它的实用性、通用性、便捷性更强,Docker容器可以说就是VM,不过占用资源更少,更轻量,通过操作系统级虚拟化方法,利用更加节省的硬件资源提供给用户更多的计算资源。
Docker容器是Linux 容器的一种封装,由于容器存在独立的运行环境,Docker可以将应用程序和依赖打包容器中,启动容器即可运行程序。
Docker部署
Docker容器配合 GitHub Action、Jenkins、Rancher使用非常的便捷,当然这里说到的是Docker个人部署实践,下面主要说到的是通用前端项目部署方案。
配置nginx
在前端根目录创建 nginx.conf(与package.json同级),具体配置如下,可以根据实际项目调整修改:
nginx配置的主要的作用是静态资源代理,同时接口转发。以上的配置是直接再本机运行,如果要在服务器上运行,可以将其中的配置改为:
配置Dockerfile
在根目录创建Dockerfile文件(与package.json同级)
上面的配置文件非常的简单,主要就是将构建打包,之后安装nginx,复制nginx配置文件,复制打包后的文件,开放80端口。
Docker镜像部署
将项目更新到服务器上,在服务器运行Docker构建命令( 当然也可以再本地构建):
docker/web:v1.0 是镜像名称,特别注意后页面那个点不能省略。
启动容器
docker/web:v1.0
是构建镜像时设置的名称,8080:80
代表将nginx的80映射到你服务器的8080端口(注意你服务器的端口是否开放8080,其他端口也可以;如果是本地访问,不用考虑这个)。镜像启动成功后,浏览器输入
localhost:8080
即可访问了。The text was updated successfully, but these errors were encountered: