网上有很多教程写的一大堆东西，新手可能会有点看不懂，现在我写这篇文章是为了更好的帮助新手，如何将自己的前端项目部署到自己的服务器上。

首先我们必须要有一台自己的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部署前端项目的更多相关文章

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

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

  2. nginx部署前端项目

    1.在阿里云服务器上安装nginx,推荐使用yum安装 yum install -y nginx // 命令安装 nginx 服务器 2.配置nginx 安装完成后,进入 nginx 配置文件目录 一 ...

  3. nginx 部署前端项目（vue）

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

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

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

  5. nginx部署h5项目

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

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

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

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

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

  8. nginx部署vue项目

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

  9. 利用Dockerfile部署SpringBoot项目

    利用Dockerfile部署SpringBoot项目 1.创建一个SpringBooot项目并且打成jar包 2.在Linux中创建一个文件夹,来做docker测试 [root@izwz90lvzs7 ...

随机推荐

  1. jquery mouseenter()方法 语法

    jquery mouseenter()方法 语法 作用:当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与 mouseleave 事件一起使用.mouseenter() 方 ...

  2. 二进制上的数位dpPOJ 3252

    Round number POJ - 3252 题目大意:一个"round number" 数的定义是,将它转化成2进制后,0的个数大于等于1的个数,要求的就是在[s,f]范围内& ...

  3. HGOI 20191030am 题解

    Problem A 腿部挂件 给出$n$个数的序列$a_i$,支持$T$次操作. 每次操作形如$x , l , r$,计算$\max_{i = l}^{r} (a_i \oplus x)$的值. 对于 ...

  4. Cortex-M3 入门指南（三）：时钟总线与复位时钟控制器

    [reset clock control  复位和时钟控制器] 时钟信号对于处理器非常重要,比如我们熟悉的 CPU 就是由时钟信号驱动的,而主频就是内核的的时钟信号频率.Cortex-M3 有着复杂的 ...

  5. BZOJ 4388 [JOI2012春季合宿]Invitation (线段树、二叉堆、最小生成树)

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4388 题解 模拟Prim算法? 原题所述的过程就是Prim算法求最大生成树的过程.于是我 ...

  6. AcWing：141. 周期（KMP)

    一个字符串的前缀是从第一个字符开始的连续若干个字符,例如”abaab”共有5个前缀,分别是a, ab, aba, abaa, abaab. 我们希望知道一个N位字符串S的前缀是否具有循环节. 换言之, ...

  7. [CSP-S模拟测试]:地理课（并查集+线段树分治）

    题目传送门(内部题146) 输入格式 从$geography.in$读入数据. 第一行两个数$n,m$,表示有$n$个点,$m$个时刻.接下来$m$行每行三个数,要么是$1\ u\ v$,要么是$2\ ...

  8. BZOJ3033太鼓达人

    第一问,1<<k,谁都看得出来. 毫无思路,暴搜,枚举每一个数列,Hash加map判断是否重复,拿到30,打表都打不出来. #include <iostream> #inclu ...

  9. light4j轻量级微服务应用

    最近对light-4j轻框架比较感兴趣,于是对现有应用做了一次重构,现将其间的一些点滴所得分享出来. 项目打包 pom.xml配置了两个profile:debug支持mvn exec:exec启动应用 ...

  10. legend3---lavarel安装debugbar工具条

    legend3---lavarel安装debugbar工具条 一.总结 一句话总结: ` lavarel插件一般是composer官网下载,然后config/app.php中声明和加别名 ` 直接照官 ...