快速搭建Ubuntu Nignx Vue.js 服务器环境

摘要:用Node.js作为前端构建工具的前端框架Vue.js越来越被各大企业使用,前后端分离也变得越来越简单,Ubuntu+Nignx+Vue+Php+Mysql是一个很低成本且快速的组合
基本概念

Ubuntu 是什么

Ubuntu是一个广泛应用于个人电脑,云计算,以及所有智能物联网设备的开源操作系统。 http://www.ubuntu-china.cn/

Ubuntu是基于Debian发行版和GNOME桌面环境,与Debian的不同在于它每6个月会发布一个新版本(即每年的四月与十月),每2年发布一个LTS长期支持版本。 普通的桌面版可以获得发布后18个月内的支持,标为LTS(长期支持)的桌面版可以获得更长时间的支持。

Nginx 是什么

Nginx(发音同engine x)是一个 Web服务器,也可以用作反向代理,负载平衡器和 HTTP缓存。该软件由 Igor Sysoev 创建,并于2004年首次公开发布。同名公司成立于2011年,以提供支持。 
Nginx 是免费的开源软件,根据类似 BSD许可证的条款发布。大部分 Web服务器通常使用 NGINX 作为负载均衡器。

自PHP-5.3.3起,PHP-FPM加入到了PHP核心,编译时加上--enable-fpm即可提供支持。 PHP-FPM以守护进程在后台运行,Nginx响应请求后,自行处理静态请求,PHP请求则经过fastcgi_pass交由PHP-FPM处理,处理完毕后返回。 Nginx和PHP-FPM的组合,是一种稳定、高效的PHP运行方式,效率要比传统的Apache和mod_php高出不少。

Vue 是什么

Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Php 是什么

PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预处理器”)是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用。PHP的语法借鉴吸收C语言、Java和Perl等流行计算机语言的特点,易于一般程序员学习。PHP的主要目标是允许网络开发人员快速编写动态页面,但PHP也被用于其他很多领域。

PHP是一个应用范围很广的语言,特别是在网络程序开发方面。一般来说PHP大多在服务器端运行,通过运行PHP的代码来产生网页提供浏览器读取,此外也可以用来开发命令行脚本程序和用户端的GUI应用程序。PHP可以在许多的不同种的服务器、操作系统、平台上运行,也可以和许多数据库系统结合。使用PHP不需要任何费用,官方组织PHP Group提供了完整的程序源代码,允许用户修改、编译、扩充来使用。

Mysql 是什么

MySQL(官方发音为/maɪ ˌɛskjuːˈɛl/“My S-Q-L”,但也经常读作/maɪ ˈsiːkwəl/“My Sequel”)原本是一个开放源代码的关系数据库管理系统,原开发者为瑞典的MySQL AB公司,该公司于2008年被昇阳微系统(Sun Microsystems)收购。2009年,甲骨文公司(Oracle)收购昇阳微系统公司,MySQL成为Oracle旗下产品。 
MySQL在过去由于性能高、成本低、可靠性好,已经成为最流行的开源数据库,因此被广泛地应用在Internet上的中小型网站中。随着MySQL的不断成熟,它也逐渐用于更多大规模网站和应用,比如维基百科、Google和Facebook等网站。非常流行的开源软件组合LAMP中的“M”指的就是MySQL。

安装教程

安装 Nignx

sudo apt-get update  #更新
sudo apt-get install nginx  #安装最新版本Nginx

Ubuntu安装之后的文件结构大致为:

  • 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/etc/nginx/sites-available下
  • 程序文件在/usr/sbin/nginx
  • 日志放在了/var/log/nginx中
  • 并已经在/etc/init.d/下创建了启动脚本nginx
  • 默认的虚拟主机的目录设置在了/var/www/nginx-default (有的版本 默认的虚拟主机的目录设置在了/var/www, 请参考/etc/nginx/sites-available里的配置)

配置 nginx

修改nginx的配置文件:/etc/nginx/sites-available/default 修改主机名

server {
    listen 80; #网站端口
    server_name my.localhost; #域名
    root /var/www/website; #网站根目录

    location / {
        proxy_pass http://localhost:8080;  #node.js默认8080端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location ~ \.php$ { #后端接口配置
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php5.6-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME 
        $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* ^.+\.(eot|ttf|otf|woff|svg)$ { #资源文件配置
        access_log   off;
        expires max;
    }

    error_log /var/log/nginx/website_error.log; #网站错误日志
    access_log /var/log/nginx/website_access.log; #网站日志
}

安装 Node.js

通过apt包管理器安装

sudo apt-get update #更新apt
sudo apt-get install nodejs #安装nodejs
node -v #查看node.js版本,测试安装是否成功

安装node.js下的包管理器npm

sudo apt-get install npm
npm -v #查看npm版本,测试npm是否安装成功
#npm服务器已经被防火墙屏蔽,可以使用淘宝的npm镜像

创建Vue项目

npm install vue
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 安装依赖,走你
cd my-project
npm install
npm run dev

安装Php和mysql

sudo apt-get install php5-cli php5-cgi mysql-server php5-mysql

安装FastCgi

sudo apt-get install php5-fpm