nginx部署前端项目
1、在阿里云服务器上安装nginx,推荐使用yum安装
yum install -y nginx // 命令安装 nginx 服务器
2、配置nginx
安装完成后,进入 nginx 配置文件目录 一般是 /etc/nginx/ 下
在该目录下新建一个 vhost 文件夹作为你自己的配置文件目录
然后进入 vhost 新建一个配置文件,比如 demo.conf,加入如下配置
server {
listen 5000; // 端口号可以自己设置
server_name localhost;
charset 'utf-8'; //设置编码格式
root /home/demo; // 注意这是里放你上面 build 文件夹里的内容
location / {
try_files $uri @fallback;
}
location @fallback {
rewrite .* /index.html break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
注意此处的/home/demo,需要根据实际的情况填写,利用xftp等软件将前端项目build文件夹里的内容复制到这里。
之后在/etc/nginx目录下编辑nginx.conf,增加对应的配置,如红线部分所示:

3、启动nginx
输入 systemctl start nginx 开启 nginx 服务
浏览器上输入 yourIpAdress:5000/ 便可以访问你的页面了
如果需要将5000端口映射为80端口,可在nginx.conf文件的location /{}中增加如下设置:

systemctl status nginx 可以查看 nginx 的运行状态
nginx -t 可查询启动失败原因
systemctl stop nginx 可以关闭 nginx 服务
nginx部署前端项目的更多相关文章
- 在docker中使用nginx部署前端项目
前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...
- 简单的利用nginx部署前端项目
网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云 ...
- nginx 部署前端项目(vue)
前提:安装好nginx 打开nginx目录,一般是(/usr/local/nginx) npm run build 打好vue包 一般放到(/usr/local/nginx/html/)目录下 配置: ...
- nginx部署h5项目
1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- docker自动化部署前端项目实战一
docker自动化部署前端项目实战一 本文适用于个人项目,如博客.静态文档,不涉及后台数据交互,以部署文档为例. 思路 利用服务器node脚本,监听github仓库webhook push事件触发po ...
- 基于云原生DevOps服务自动化部署前端项目学习总结
本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发 ...
- 使用uWSGI+nginx部署Django项目
最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...
- 服务器nginx部署PHP项目样式不出来要注意的小问题
服务器使用nginx部署PHP项目的时候如果样式没有 出来,那么很可能 location 块里出问题了. 比如 location / { root /home/wwwroot/default/php_ ...
随机推荐
- SpringBoot 异步调用方法并接收返回值
项目中肯定会遇到异步调用其他方法的场景,比如有个计算过程,需要计算很多个指标的值,但是每个指标计算的效率快慢不同,如果采用同步执行的方式,运行这一个过程的时间是计算所有指标的时间之和.比如: 方法A: ...
- 感兴趣的WebGL ,来自微博的一个全景星空图~
https://m.weibo.cn/z/panorama?oid=1042143:ee51daffe7e7f497069af8c74840bbc2 还有一些好玩的相关链接 http://webgls ...
- Ubuntu/centos/redhat/SUSE sipp安装(带rtp支持,3.5.1版本)
1.ubuntu 12.04 apt-get install ncurses-dev apt-get install libpcap-dev ./configure --with-pcap make ...
- C++ STL 之 set 和 pair
set/multiset 的特性是所有元素会根据元素的值自动进行排序.set 是以 RB-tree(红黑树,平衡二叉树的一种)为底层机制,其查找效率非常好.set 容器中不允许重复元 素,multis ...
- element之input输入搜索联想框
1. 模板代码 <el-autocomplete :minlength="2" v-model="searchName" :fetch-suggestio ...
- RabbitMQ消息分发轮询
一,前言 如果我们一个生产者,对应多个消费者,rabbitmq 会发生什么呢 二,消息分发轮询 前提条件:1个生产者 ----> 多个消费者,且no_ack=True (启动三次生产者) ① ...
- 前端基础(七):Toastr(弹出框)
Toastr 简介 jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差. 所以一般通过自定义提示框来实现弹窗提示信息,而jq ...
- 简单介绍 Java 构造器
导读 构造器是编程的强大组件.使用它们来释放 Java 的全部潜力. 在开源.跨平台编程领域,Java 无疑(?)是无可争议的重量级语言.尽管有许多伟大的跨平台框架,但很少有像 Java 那样统一和直 ...
- Hadoop_33_Hadoop HA的搭建
Hadoop HA的搭建,可参考链接:https://blog.csdn.net/mrbcy/article/details/64939623 说明: 1.在hadoop2.0中通常由两个Nam ...
- 12_Redis_服务器命令
一:Redis 服务器:Redis 服务器命令主要是用于管理 redis 服务