使用Nginx镜像中的默认配置文件nginx.conf并进行修改添加,笔者在做测试的时候,出现了一堆奇奇怪怪的问题,包括访问过程中的404 error,后续笔者直接从nginx官网下载了nginx linux版本, 并拷贝出里边的nginx.conf文件来基于此文件配置,一切问题得以解决(大家如果采用的window部署,那就下载windows版本的nginx.conf,里边的配置...
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...
docker run -d -p 80:80 your-vue3-app-name:latest 我们将容器的80端口映射到宿主机的80端口,这样用户就可以直接通过域名或IP访问Vue3前端应用了。 四、配置Nginx反向代理 如果你的前端Vue3应用和后端SpringBoot服务不在同一台服务器上,或者需要通过不同的路径来访问它们,你可以配置Nginx作为反向代理来转发请求。
在Docker中使用Nginx部署Vue3项目,可以遵循以下步骤: 1. 搭建并运行Docker环境 首先,确保你的系统上已经安装了Docker。如果还没有安装,你可以从Docker官网下载并安装。 2. 在Docker中配置和运行Nginx服务器 你可以通过拉取官方的Nginx镜像来启动Nginx服务器: bash docker pull nginx 然后,你可以使用以下命令来启动Ng...
步骤:(1)那我实例化一个Nginx容器 (2)把Vue文件扔进去 (3)进入容器,修改.conf文件(Nginx配置文件,匹配对应目录)。 这里,把vue文件扔到Docker容器中,可能需要Docker自带的拷贝命令。 # docker cp 要拷贝的文件路径 容器名:要拷贝到容器里面对应的路径 ...
1.宿主机创建目录,用于存放build之后的前端文件,以及nginx配置文件。 2.在conf目录下,创建配置nginx.conf文件。 3.拉取镜像 4.创建容器,并设置挂接数据卷 5.访问宿主机ip,则可以访问网页。 6.附录,docker常用命令 二、后端部署 1.在宿主机文件夹下,把代码、配置文件整理到同一目录下。 2.编写启动脚本 3.Doc...
index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root flowhtml; } } 3. 把vue打包的dist文件,上传到本地 /home/nginx/www/下,重命名为flowhtml ,即可。
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf # 将容器nginx.conf文件复制到宿主机docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d # 将容器conf.d文件夹下内容复制到宿主机docker cp nginx:/usr/share/nginx/html /home/nginx/ # 将容器中的html文件夹复制到宿主机...
docker构建vue3前端项目 前端是基于vue3开发typescript项目,打包之后将生成的dist静态资源放到我们准备好的目录下,然后在这个目录下创建一个Dockerfile文件和nginx.conf配置文件,做如下配置: FROM nginx:1.24.0WORKDIR/usr/share/nginx/html COPY dist/usr/share/nginx/html/COPY nginx.conf/etc/nginx/nginx.conf ...
docker + nginx 部署vuejs3.0项目 1:用指令 npm run build 打包vusjs项目(该项目是在github上下载的)。打包成功后会生成一个目录dist。 2:把该文件夹拷贝到腾讯云服务器(操作系统 centos7)下的/usr/share目录下。 3:在/usr/share目录下新建Dockerfile文件...