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

首先我们必须要有一台自己的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. robotframework 获取坐标

    Get Horizontal Position  获取X轴坐标 Get Vertical Position      获取Y轴坐标 Get Element Size          获取整个图表的高 ...

  2. win.10 禁止自动更新

             ·  Windows 10:“我已经更新完毕,请重启我吧主人!” ·  Windows 10:“好吧,主人在忙,我重启了先~” ·  Windows 10: “正在配置windows ...

  3. C# 多线程任务分配辅助类

    1)首先实现一个多线程的辅助类,代码如下: public class ThreadMulti { public delegate void DelegateComplete(); public del ...

  4. CSS3 box-sizing:content-box | border-box

    box-sizing:content-box | border-box 默认值:content-box 适用于:所有接受width和height的元素 继承性:无 content-box: paddi ...

  5. 从零开始入门 K8s | Kubernetes 调度和资源管理

    作者 | 子誉  蚂蚁金服高级技术专家 关注"阿里巴巴云原生"公众号,回复关键词"入门",即可下载从零入门 K8s 系列文章 PPT. Kubernetes 调 ...

  6. [ubuntu] 外挂硬盘

    1. 查看磁盘信息 fdisk -l 这里我需要对sda进行分区,所以要进到sda中 2. 进到欲分区磁盘中 $ sudo fdisk /dev/sda Welcome to fdisk (util- ...

  7. vue + ts Vuex篇

    Vuex对Typescript的支持,仍十分薄弱,官方库只是添加了一些.d.ts声明文件,并没有像vue 2.5这样内置支持. 第三方衍生库 vuex-typescript, vuex-ts-deco ...

  8. 编译器GCC的Windows版本 : MinGW-w64安装教程

    MinGW-w64安装教程 http://rsreland.net/archives/1760

  9. 05.用两个栈实现队列 Java

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路 进栈: 直接进stack1 出栈: 若stack2不为空,则出栈. 否则,当stack1不为空时, ...

  10. 学习UEFI 之你把C语言学好了码?学习UEFI 之你把C语言学好了吗?

    很多人在问我说: 怎样子把UEFI 学好?! 其实写BIOS 的人答案应该只有一个,把SPCE看懂看完然后融会贯通!这样子的答案好像跟没有是一样的! 小弟就以我的学习经验来分享给大家吧!(虽然我也没学 ...