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部署前端项目的更多相关文章

  1. 在docker中使用nginx部署前端项目

    前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...

  2. 简单的利用nginx部署前端项目

    网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云 ...

  3. nginx 部署前端项目(vue)

    前提:安装好nginx 打开nginx目录,一般是(/usr/local/nginx) npm run build 打好vue包 一般放到(/usr/local/nginx/html/)目录下 配置: ...

  4. nginx部署h5项目

    1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...

  5. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  6. docker自动化部署前端项目实战一

    docker自动化部署前端项目实战一 本文适用于个人项目,如博客.静态文档,不涉及后台数据交互,以部署文档为例. 思路 利用服务器node脚本,监听github仓库webhook push事件触发po ...

  7. 基于云原生DevOps服务自动化部署前端项目学习总结

    本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发 ...

  8. 使用uWSGI+nginx部署Django项目

    最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...

  9. 服务器nginx部署PHP项目样式不出来要注意的小问题

    服务器使用nginx部署PHP项目的时候如果样式没有 出来,那么很可能 location 块里出问题了. 比如 location / { root /home/wwwroot/default/php_ ...

随机推荐

  1. Java Web-EL表达式 in JSP

    Java Web-EL表达式 in JSP 概念 EL(Expression Language)是一种表达式语言,可以替换和简化JSP页面上JAVA代码的书写 语法 ${<在这里写表达式> ...

  2. python 删除特定字符所在行

    #查询文件中含有特殊字符串的行 #!/usr/bin/python # -*- coding:utf- -*- import re file1 = open('test.txt','r+') istx ...

  3. db2数据库的备份与还原

    前言: 数据备份的重要性: 提高系统的高可用性和灾难可恢复性:(在数据库系统崩溃的时候,没有数据库备份怎么办!) 使用数据库备份还原数据库是数据库系统崩溃时提供数据恢复最小代价的最优方案:(总不能让客 ...

  4. Oracle笔记(十) 约束

    表虽然建立完成了,但是表中的数据是否合法并不能有所检查,而如果要想针对于表中的数据做一些过滤的话,则可以通过约束完成,约束的主要功能是保证表中的数据合法性,按照约束的分类,一共有五种约束:非空约束.唯 ...

  5. python实现数据的压缩与归档

    楔子 尽管现代计算机系统的存储能力日益增长,但生成数据的增长是永无休止的. 无损(lossless)压缩算法以压缩或解压缩数据花费的时间来换取存储数据所需要的空间,以弥补存储能力的不足. Python ...

  6. PAT Basic 1057 数零壹 (20 分)

    给定一串长度不超过 1 的字符串,本题要求你将其中所有英文字母的序号(字母 a-z 对应序号 1-26,不分大小写)相加,得到整数 N,然后再分析一下 N 的二进制表示中有多少 0.多少 1.例如给定 ...

  7. 【转】GO语言map类型interface{}转换踩坑小记

    原文:https://www.az1314.cn/art/69 ------------------------------------------ mapA := make([string]inte ...

  8. 上传时excel类型accept的MIMI类型

    1.excel文件类型 accept='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/v ...

  9. CentOS开放端口的方法

    Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld.所以,端口的开启还是要从两种情况来说明的,即iptables和firewalld.更多关于CentOs防火墙的最新 ...

  10. BZOJ5017 [Snoi2017]炸弹[线段树优化建边+scc缩点+DAG上DP/线性递推]

    方法一: 朴素思路:果断建图,每次二分出一个区间然后要向这个区间每个点连有向边,然后一个环的话是可以互相引爆的,缩点之后就是一个DAG,求每个点出发有多少可达点. 然后注意两个问题: 上述建边显然$n ...