使用npm run build 命令将vue项目打包,生成dist目录。 将文件夹放到服务器上,我们这里是放到了服务器的 /usr/local 目录下 编写构建脚本 1.在当前目录新建Dockfile文件 Dockerfile 1 2 3 4 5 6 7 8 9 10 11 # 指定基础镜像,必须为第一个命令 # 可以使用镜像ID或者镜像名称 例如 nginx:1.14 FROM bb52fc...
将文件上传到服务器上进行打包和发布,Dockerfile和要打包的文件需要在同一个目录下,确保服务器上已经安装Docker环境。 Dockerfile# # Docker image for vue application# VERSION 1.0.0# Author: swcode### 基础镜像,使用nginx镜像FROMnginx#作者MAINTAINERswcode <2627311935@qq.com>#应用构建成功后的文件被复制到...
接下来,我们使用Nginx镜像作为最终的基础镜像,并将构建好的Vue项目复制到Nginx的默认静态文件目录。最后,我们使用默认的Nginx配置文件,并暴露80端口。 在Vue项目的根目录下创建一个名为default.conf的文件,并添加以下内容: server{listen80;server_name localhost;location /{root /usr/share/nginx/html;index index.h...
配置nginx的ssl部分通常我们可以配置全局的ssl,也可以针对某个server进行配置,以下以server进行配置。 # cat nginx.conf --- user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime....
将vue项目打包 npm run build 同级目录下会生成dist文件夹 开始用docker打包vue项目成镜像 前提你的ubuntu环境下有docker 在dist同级目录下创建Dockerfile文件进行写入: FROM nginx EXPOSE 80 COPY /dist /usr/share/nginx/html ENTRYPOINT nginx -g "daemon off;" ...
- Dockerfile.dist 构建vue运行的nginx镜像 - nginx.conf nginx镜像的配置 - src 源码 - dist 由node打包镜像运行的容器生成的构建产物 - package.json npm包配置 - ... 为vue 项目制制作 node 打包镜像 linxu 下 node 打包遇到解决的问题 笔者环境:docker:18.06,node:14.10.1,vue:2.6.11 ,webpack-cli:3....
nginx -s reload 小结 我们希望在本项目中学习 docker 的使用,但是又不希望破坏整个系统的部署架构,因此做了这样的设计,只针对 vue 前端部分采用了 docker 部署方式。通过实践,我们学会了如何使用 docker 制作镜像、运行容器、上传镜像,也学会了怎么使用私有镜像仓库,最终在完全兼容的前提下成功改造了系统的部署方式。
1、打包 2、上传到服务器并解压(我已经解压) 3、修改nginx.conf配置文件 4、部署 代码语言:docker 复制 docker run -d \ --name vue-nginx \ -p 8091:80 \ -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro \ -v /usr/local/nginx/dist:/usr/share/nginx/html:ro \ nginx:latest...
部署前端 ① 创建 /work/nginx 目录,并在该目录下新建 nginx.conf 文件,避免稍后安装 Nginx 报错。内容如下: user nginx;worker_processes1;events{worker_connections1024;}error_log/var/log/nginx/error.log warn;pid/var/run/nginx.pid;http{include/etc/nginx/mime.types;default_type application/octet-stre...
root/usr/share/nginx/html;# vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址) location/{try_files $uri $uri/@router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404index index.html index.htm;}#对应上面的@router,主要原因是路由的路径资源并不是...