nginx部署前端

最新推荐文章于 2023-09-15 15:54:11 发布
置顶 VIP文章 最新推荐文章于 2023-09-15 15:54:11 发布
阅读量2.1k 收藏 11
点赞数 5
分类专栏： 应用技巧 文章标签： vue nginx 前端部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/douzhenwen/article/details/116070418
版权

部署环境：win10

第一步：nginx下载

下载地址：http://nginx.org/en/download.html

nginx文件目录

点击nginx.exe启动程序开启nginx，默认端口为80

成功访问：http://localhost/

第二步：编译前端项目

前端采用vue框架进行开发，将项目编译成静态文件【html、css、js】

vue项目目录结构

修改位置1：config/index.js

最低0.47元/天 解锁文章
菜鸟阿都
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
使用nginx部署前端项目（超详细教程）.pdf
04-29
使用nginx部署前端项目是一篇非常详细的教程，旨在帮助初学者使用Nginx来部署前端项目。本文首先介绍了Nginx的基本概念和作用，解释了为什么Nginx是一个强大的Web服务器和反向代理。然后，文章详细讲解了如何在Linux系统上安装Nginx，并介绍了Nginx的一些基本配置和使用方式。接下来，文章详细讲解了如何使用Nginx来部署前端项目，包括如何设置静态文件目录和如何配置反向代理和HTTPS。文章还包含了大量的代码示例和截图，以帮助读者更好地理解和操作Nginx。总的来说，这篇教程对于想要学习Nginx并使用它来部署前端项目的初学者来说是一篇非常实用和全面的指南。 此外，所使用的前端资源自已上传到了个人资源库，本人所有博客资源秉持免费的态度，提供大家，我们一起学习进步！ 在这个繁忙的世界里，我们常常会遇到很多人和事。有些人和事只是匆匆而过，而有些则会与我们产生深刻的联系和感悟。在这方面，我真的感谢遇见了你。你的聆听、鼓励和支持一直伴随着我走过很多难关和艰辛，这让我感到非常幸运和感激。 感谢相遇，愿我们向阳而生，温暖，善良！
在nginx中部署前端项目
JAVA_codemaster的博客
02-24 559
通过以上步骤，就可以将前端应用部署到 Nginx 服务器上。这不仅可以提高应用的访问速度，还可以利用 Nginx 提供的各种功能，如缓存、负载均衡和安全增强等，来进一步优化你的应用。
nginx配置前端可访问文件
python程序员
01-20 705
/etc/nginx/conf.d/nginx.conf 中 第二个 server 中配置 PreviewArea -> 指需要被访问的文件夹, 需将该文件夹配置 777 权限 /data10/website -> 需要被访问的文件夹的文件路径, 最好将文件目录配置 777 权限 root -> 当前用户 -> 匹配到就停止 location ~/PreviewArea/(.*) { root /data10/website; expires 1h; access_log of
关于nginx.conf配置两个前端路径
xinyuerr的博客
09-15 628
在实际的项目开发中，有时候难免会遇到内网开发，但是内网开发的话测试就没法在外网进行测试，这个时候我们就可以部署一个内网和一个外网的，这样就可以保证内网正常使用的同时，测试也可以使用外网进行测试，不会耽误进度。从配置文件中可以看到，我们多配置了一个example-test，回头我们在/a/b路径下创建两个文件夹example和example-test，一个放内网的前端包，一个放外网的前端包，就可以解决问题。到此这篇关于nginx.conf配置两个前端路径的文章就介绍到这了,更多。
前端同学的Nginx配置指南
一步一个脚印，踏实努力，向着目标前进
09-10 1022
server块（Server Block）：server块用于配置具体的虚拟主机。全局块（Global Block）：全局块包含了全局的Nginx配置指令，用于设置Nginx的全局参数。反向代理配置：如果需要将请求代理到其他服务器，可以使用反向代理配置。events块（Events Block）：events块用于配置Nginx的事件模型。http块（HTTP Block）：http块包含了HTTP服务的配置指令。块来配置静态文件的访问。重启Nginx：在修改完配置文件后，需要重启Nginx使配置生效。
Nginx 配置指向多个目录，js、css 404等问题解决
ATwill的专栏
10-23 7168
目标： 同一域名， 同一端口， 实现 两个前端项目的无缝跳转和链接 1. 通过 location 指向需要跳转的目录 location /new-home/ { alias /mnt/new/pgv/; index index.html index.htm index.php; } 注意：alias 和 root 的区别： roo...
使用nginx部署前端项目
lianaozhe的博客
11-25 5220
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
linux配置nginx，并访问前端文件
weixin_56489753的博客
04-20 1571
下载地址: https://nginx.org/download/需要安装gcc环境；第三方包；PCRE(Perl Compatible Regular Expressions)是一个Perl库，包括 perl 兼容的正则表达式库zlib库提供了很多种压缩和解压缩的方式，nginx使用zlib对http包的内容进行gzip，所以需要在linux上安装zlib库。OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议，并提供丰富的应用程序供测
nginx.conf配置两个前端路径
NewBeeMu的博客
11-01 2400
在实际的项目开发中，有时候难免会遇到内网开发，但是内网开发的话测试就没法在外网进行测试，这个时候我们就可以部署一个内网和一个外网的，这样就可以保证内网正常使用的同时，测试也可以使用外网进行测试，不会耽误进度。从配置文件中可以看到，我们多配置了一个example-test，回头我们在/a/b路径下创建两个文件夹example和example-test，一个放内网的前端包，一个放外网的前端包，就可以解决问题。
Nginx 动静分离
孚尹旁达
04-05 2213
配置反向代理 http://192.168.159.104的文件目录 这个服务器只存放html文件 静态文件不存放 在负责转发的Nginx 放置静态文件（css js img fonts等） http://192.168.159.101 文件目录如下 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type appli
web服务器nginx+部署前端vue项目
最新发布
03-22
1. 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。 其特点是占有内存少，并发能力强...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
centos安装nginx,部署前端项目，并配置SSL与CDN
09-13
centos安装nginx,部署前端项目，并配置SSL与CDN
Nginx+前端+Docker环境部署
04-27
使用Nginx配置环境
国内镜像大全
菜鸟阿都
04-23 7585
收集于：2021/04/23 企业镜像 淘宝镜像：https://npm.taobao.org/mirrors/ 网易镜像：http://mirrors.163.com/ 搜狐镜像：http://mirrors.sohu.com/ 腾讯镜像：https://mirrors.cloud.tencent.com/ 华为镜像：https://mirrors.huaweicloud.com/ 清华镜像：https://mirrors.tuna.tsinghua.edu.cn/ 豆瓣镜像：https:
服务器防火墙开启导致无法远程连接解决方案
菜鸟阿都
06-03 7506
前言：在使用阿里云服务器的过程中，开启了服务器的防火墙，导致本地xshell以及阿里云官网自带的远程连接均无法使用，在联系阿里云技术客服后，才得到了解决，将整个解决方案总结如下，希望可以帮到那些 ...
idea好用的json格式化预览插件
菜鸟阿都
10-20 6973
Idea好用的json解析格式化插件，比在线json解析网站好用百倍
win10关闭某个端口
菜鸟阿都
04-23 3283
前言 作为一个程序员，经常遇到启动某个软件时，会爆出某个端口被占用，所以使用命令关闭端口的技能必须掌握 第一步：查询端口对应的PID netstat -ano|findstr 1099 第二步：根据PID关闭该进程 【F参数：表示强制关闭】 taskkill /pid 24588 /F 效果图： ...
nginx 部署前端
09-27
nginx 部署前端的步骤如下： 1. 将前端项目文件放置在 nginx 的默认网站根目录下，一般路径为 /var/www/html。 2. 确保 nginx 已经正确安装和启动。 3. 打开 nginx 的配置文件，一般路径为 /etc/nginx/nginx.conf。 4. 在配置文件中找到 server 部分，并在其中添加一个 location 配置项，用于指定前端项目的访问路径和根目录，例如： ``` location / { root /var/www/html; index index.html; } ``` 这里的 root 指定了项目的根目录，index 指定了默认访问的文件。 5. 保存配置文件并重新加载 nginx 配置，使修改生效。 6. 在浏览器中输入服务器的 IP 地址或域名，即可访问部署在 nginx 上的前端项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值