nginx部署前端项目

最新推荐文章于 2024-05-08 15:49:23 发布
最新推荐文章于 2024-05-08 15:49:23 发布
阅读量480 收藏 7
点赞数 9
文章标签： nginx 前端 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46495862/article/details/136207176
版权

服务器上部署前端项目

1. 前端项目打包

    1. 1 前端项目打包根据各自项目使用的框架以及构建工具打包, 我这里使用的是基于webpack封装的umi
      *1.2 打包成dist后上传至Linux服务器自定义的前端目录
      在这里插入图片描述

2. 配置nginx

  • 2.1 编辑nginx.conf
vim /usr/local/nginx/conf/nginx.conf

在这里插入图片描述
在这里插入图片描述

  • 重载 nginx配置
nginx -s reload

3. 检查是否能够访问

  • 3.1 检查nginx状态
ps -ef | grep 'nginx'

在这里插入图片描述

  • 3.2 浏览器访问服务器地址
spoiledcat
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
nginx部署前端
菜鸟阿都
04-23 2203
部署环境：win10 第一步：nginx下载 下载地址：http://nginx.org/en/download.html nginx文件目录 点击nginx.exe启动程序开启nginx，默认端口为80 成功访问：http://localhost/ 第二步：编译前端项目 前端采用vue框架进行开发，将项目编译成静态文件【html、css、js】 vue项目目录结构 修改位置1：config/index.js vue默认打包生成的静态文件存放在dist目录中，修改配置将dis
Nginx部署前端
m0_56966134的博客
11-06 1824
shide nginx 安装说明操作Nginx命令编写Nginx配置实现反向代理发布前端项目实现负载均衡 nginx 安装说明 一、下载 nginx download https://nginx.org/en/download.html 二、解压，双击nginx.exe，如图 三、访问80端口查看，如图证明启动成功 四、如果没反应，说明80端口号被专用，可以先杀死80端口 netstat -ano | findstr “80”(查看占用80端口的进程号) 打开任务管理器，找到PID(进程号)为78
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
最新发布
2401_84435838的博客
05-08 1315
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
nginx项目部署（前端）
yangyi
05-22 497
1、工具 xshell xftp 将打包的dist中的文件通过xftp上传到对应的文件夹下（参考：本人做过的几次都在/usr/local/nginx/html），然后找到nginx.conf(参考：本人的在/usr/local/nginx/conf)，打开nginx.conf修改里面的 server { listen 8080;//此处需要改成需要的，默认808...
nginx前端部署
love_THL的博客
05-12 341
###############-----nginx学习------################################wget http://nginx.org/download/nginx-1.13.11.tar.gz (Nginx安装包)cd /usr/local/nginx/sbin (进入到安装Sbin文件下 相当于windows下bin目录下启动)nginx -c /usr/local/nginx/conf/nginx.conf (启动貌似固定配置)//虚拟机的ip地址。
Nginx前端部署
qq_34254462的博客
05-06 1139
1. 执行如下命令，构建前端代码，构建成功后会在目录dist下生成构建完成的文件，将dist整个文件夹拷贝到服务器中 npm install npm run build dev 2. 进入ngix目录/usr/local/nginx/conf，修改nginx.conf文件，将root参数路径指向你的构建文件 server { listen 80; server_name localhost; root /work/lsw-web-s
使用nginx部署前端项目（超详细教程）.pdf
04-29
使用nginx部署前端项目是一篇非常详细的教程，旨在帮助初学者使用Nginx来部署前端项目。本文首先介绍了Nginx的基本概念和作用，解释了为什么Nginx是一个强大的Web服务器和反向代理。然后，文章详细讲解了如何在Linux...
web服务器nginx+部署前端vue项目
03-22
1. 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。 其特点是占有内存少，并发能力强...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.... 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需
centos安装nginx,部署前端项目，并配置SSL与CDN
09-13
centos安装nginx,部署前端项目，并配置SSL与CDN
用Nginx部署前端项目
qq_69503426的博客
04-19 817
然后将压缩包上传至虚拟机（需要下载Xsell和Xftp，Xsell-输入命令，Xftp-上传文件到虚拟机）点击i进行编辑，修改路径为dist在虚拟机上所在的位置，修改完成后按ECS,输入:wq即可退出（然后再依次输入以下命令（出现截图中的情况，则部署成功）需要上面两个安装包可以私信我，也可以通过其他途径下载。在浏览器中输入虚拟机端口号出现以下页面，则部署成功。（需要将第一个红色画框的内容全部“杀掉”才可以）:wq保存修改并退出，:q!以上运行内容过多，就不展示运行结果了。（出现以下内容，则还不可以）
用nginx部署前端项目
why404
08-28 364
前端项目nginx部署主要的配置基本上就是上面提到的这些。首先是location路由的四种写法；接着就是分清楚root和alias的区别；当项目较多时需要使用二级路由时，需要注意重定向的配置；如果你的项目文件较大，可以开启gzip压缩提升传输效率。
使用 Nginx部署前端项目
blue_121的博客
05-23 2865
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
nginx 部署前端项目
热门推荐
Amazing66的博客
12-27 1万+
1、首先将前端项目打包放在服务器上 2、修改nginx 配置文件
利用nginx简单部署前端项目
uncle_Huang的博客
06-04 763
情况描述：前端项目是vue项目，把项目打包后部署到服务器上，服务器是linux系统。 需要用到的软件：Xshell，Xftp 适用对象：前端小白（大佬们就不要看了，写得一般般，羞羞） 首先本地用Xshell连接服务器 打开Xshell，点击文件-》新建 填写名称、主机和端口号。 点击用户身份验证，方法默认password，填写用户名和密码，点击确定。 连接后，查看服务器有没有安装nginx，输入 find / -name nginx 如果安装了，输入后按回车键，会显示nginx的安装路径，如下图
Nginx部署前端项目
吹灭读书灯 一身都是月的博客
05-21 8597
首先当然是检查Nginx： 查看nginx的安装路径：whereis nginx nginx: /usr/local/nginx nginx常用命令： cd /usr/local/nginx/sbin ./nginx ./nginx -s stop ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件 ps aux | grep nginx nginx展示图片： location /images { root /us
使用nginx部署前端项目
lianaozhe的博客
11-25 5376
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

spoiledcat

过程曲折,希望得到认可

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值