无论是本地的dev-api还是线上的prod-api的标识本质上都是解决前后端分离项目的跨域问题,只不过本地使用的vue的proxyTable代理,线上使用的是nginx的代理,手段则是统一的替换标识为真正的后端地址。 四. 结语 至此youlai-mall后端和前端都已部署完毕,线上网址www.youlai.store,目前上线的功能有系统管理模块和OAuth2统...
user nginx;worker_processes auto;# error_log 输出目录error_log /var/log/nginx/error.log notice;pid /var/run/nginx.pid;events {# 单个工作进程可以允许同时建立外部连接的数量worker_connections 1024;}http {include /etc/nginx/mime.types;default_type application/octet-stream;log_format main '$remote...
这里直接替换了uri的前缀prod-api,也就是说假设前端向后端发送的请求为http://localhost:8800/prod-api/admin/system/index,经过nginx反向代理后,实际上到达后端的uri为http://localhost:8800/admin/system/index 至此,前端项目部署完毕 访问codeleader.top/guigu,会出现如下页面说明前端部署成功 4、...
1、下载nginx镜像 2、创建容器 3、访问nginx 4、进入nginx容器 ①、发现无法使用vim命令修改配置文件 所有需要进行目录挂载 ②、删除nginx容器 5、将配置文件挂载到容器中 ①、在home目录下新建nginx目录 ②、进入nginx目录,新建conf.d,html,log目录 ③、进入conf.dx,新建default.conf ④、进入html文件夹,导入vue....
写这篇笔记的主要目的是:后续自己开发完前端项目后,可以自己模拟部署,这样在正式部署时,就不会各种麻烦后端或运维大哥了。万一真出了问题,直接把本地配置丢过去一般就可以了。 一、docker安装nginx镜像 docker pull nginx (可能需要用梯子) 二、编写配置文件nginx.conf ...
2.1 前端项目打包 由于我需要在同一个端口号下使用nginx部署多个前端项目,所以需要额外设置一些东西。 2.1.1 修改vue.config.js文件 添加如下配置: 2.1.2 router配置中添加base属性 代码语言:javascript 复制 constcreateRouter=()=>newRouter({// mode: 'history', // require service supportscrollBehavior:()=>...
Docker | Docker+Nginx部署前端项目 1.前言 大家好,我是Leo哥 ,这篇文章中,我们已经学习了如何通过Docker来部署我们SpringBoot项目,那么我们这篇文章教大家如何通过Docker + Nginx + Dockerfile的方式去部署我的前端项目。好了,话不多说让我们开始吧 。
简介:本文将引导您使用Docker和Nginx部署前端项目。通过Docker的容器化技术,您可以轻松地创建、部署和管理Web应用程序,而Nginx作为高性能的Web服务器,能够提供出色的性能和可扩展性。本文将介绍如何使用Docker和Nginx部署前端项目,包括创建Dockerfile、配置Nginx和运行容器等步骤。
初次接触docker部署前后端项目,各种踩坑。经过查询大量资料及部署的方式。终于总结出一套适合自己的部署方式。项目后端采用镜像的方式启动,前端则和nginx一起部署。 安装docker 首先我们需要在服务器安装docker:: 使用官方安装脚本自动安装 : curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun;...