使用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.宿主机创建目录,用于存放build之后的前端文件,以及nginx配置文件。 2.在conf目录下,创建配置nginx.conf文件。 3.拉取镜像 4.创建容器,并设置挂接数据卷 5.访问宿主机ip,则可以访问网页。 6.附录,docker常用命令 二、后端部署 1.在宿主机文件夹下,把代码、配置文件整理到同一目录下。 2.编写启...
概述 技术栈:docker + vue3 + nginx 部署流程 1、docker下载安装 nginx docker pull nginx 2、创建nginx挂载目录 /usr/local/nginx (可根据自己需要存放文件的位置自行创建目录) mkdir -p /usr/local/nginx
3|03、生成容器 docker run --name nginx -p 80:80 -d nginx 4|04、复制相关配置到宿主机 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、Nginx、Vue、Node.js、DockerFIle 总体思路设计 ~~1.Docker中创建Node.js容器~~ ~~2.Docker实例化Nginx容器,进入容器修改配置文件~~ 3.编写DockerFile,将基础镜像Nginx和配置文件写入 正式开始部署(选择编写DockerFile的方式,简单直接)
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 ...
nginx:latest node:latest 2.具体实现: 用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。