简单的利用nginx部署前端项目
网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上。
首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云官网去购买一台,趁现在阿里云搞活动。(ps:我并没有打广告)
然后我们准备我们的前端项目不管你是vue项目还是普通的jquery写的项目都是一样的,本文的前端项目是vue。
通过git把他克隆到我们的服务器下面,我的前端项目就放在/home
下面是我前端项目的目录和内容,我们主要是用到打包后的dist文件夹。

然后我们开始安装nginx

安装完之后我们简单的配置一下nginx
进入/etc/nginx/sites-enabled这个目录,然后复制一份default到当前文件夹名字为自己取,现在我命名为resume.zengjielin.top

然后我们修改resume.zengjielin.top文件的内容,如下

你只需要修改我红色框的部分
解释一下server_name 写你的域名
locations 写你的前端的目录所在的路径,可以通过命令pwd来查看你前端的路径,上面有截图。
然后保存,再重启一下你的nginx配置。

接下来我们访问我们的网站:resume.zengjielin.top(复制网站到浏览器打开查看结果)

简单的利用nginx部署前端项目的更多相关文章
- 在docker中使用nginx部署前端项目
前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...
- nginx部署前端项目
1.在阿里云服务器上安装nginx,推荐使用yum安装 yum install -y nginx // 命令安装 nginx 服务器 2.配置nginx 安装完成后,进入 nginx 配置文件目录 一 ...
- nginx 部署前端项目(vue)
前提:安装好nginx 打开nginx目录,一般是(/usr/local/nginx) npm run build 打好vue包 一般放到(/usr/local/nginx/html/)目录下 配置: ...
- 基于云原生DevOps服务自动化部署前端项目学习总结
本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发 ...
- nginx部署h5项目
1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...
- docker自动化部署前端项目实战一
docker自动化部署前端项目实战一 本文适用于个人项目,如博客.静态文档,不涉及后台数据交互,以部署文档为例. 思路 利用服务器node脚本,监听github仓库webhook push事件触发po ...
- 使用uWSGI+nginx部署Django项目
最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- 利用Dockerfile部署SpringBoot项目
利用Dockerfile部署SpringBoot项目 1.创建一个SpringBooot项目并且打成jar包 2.在Linux中创建一个文件夹,来做docker测试 [root@izwz90lvzs7 ...
随机推荐
- apache log4j将日志保存在mongodb数据库中(转)
og4j与mongodb整合 Mongo Java driver jar包 log4mongo-java jar包 配置log4j.properties文件,使之整合mongodb: #将Mongod ...
- JDK8日期处理API(转)
转载地址:http://www.cnblogs.com/comeboo/p/5378922.html 转载地址:http://blog.csdn.net/hspingcc/article/detail ...
- poj 2431 Expedition 贪心+优先队列 很好很好的一道题!!!
Expedition Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10025 Accepted: 2918 Descr ...
- vue中全局组件与局部组件的注册,以及动态绑定props值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JVM GC之对象生死
1.简述 在Java内存运行时区域的各个部分中,程序计数器.虚拟机栈.本地方法栈3个区域随着线程而生,随着线程而亡.栈中的栈帧随着方法的进入和退出而有条不紊的进行着入栈和出栈操作. 每个栈帧需要分配多 ...
- C++入门经典-例7.6-this指针,同一个类的不同对象数据
1:对于类的非静态成员,每个对象都有自己的一份拷贝,即每个对象都有自己的数据成员,不过成员函数却是每个对象共享的.那么调用共享的成员函数如何找到自己的数据成员呢?答案是通过类中隐藏的this指针. 2 ...
- (一)C语言的四大数据类型
- stingstream 类
使用完后在使用必须要clear():
- js监听某个元素高度变化来改变父级iframe的高度
最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...
- kentico中page alias的使用
这里设置的path or pattern,是针对于根目录而言的