趁着爸妈做年夜饭之前，把之前做的笔记贴出来，新的一年到了，祝大家

Nginx + Node + Vue 部署初试

知乎

个人博客

Github

日常学习笔记

Nginx

1. 定义

   异步框架的 Web服务器，也可以用作反向代理，负载平衡器 , HTTP缓存, 媒体流等的开源软件。它最初是一个旨在实现最高性能和稳定性的Web服务器。除了HTTP服务器功能外，NGINX还可以用作电子邮件（IMAP，POP3和SMTP）的代理服务器以及HTTP，TCP和UDP服务器的反向代理和负载平衡器。

2. 特点

   • 更快
   • 高扩展性, Nginx的模块都是嵌入到二进制文件中执行
   • 高可靠性
   • 低内存消耗
   • 单机支持10万次的并发连接
   • 热部署, master管理进行与work工作进程分离设计，因此具备热部署功能
   • 最自由的BSD许可协议

3. 功能

   • 静态服务（css , js , html, images, videos）
   • SSL 和 TLS SNI支持
   • HTTP/HTTPS, SMTP, IMAP/POP3 反向代理
   • FastCGI反向代理
   • 负载均衡
   • 页面缓存（CDN）
   • 支持gzip、expirse
   • 支持 keep-alive 和管道连接
   • 基于 PCRE 的 rewrite 重写模块
   • 带宽限制
   • 基于IP 和名称的虚拟主机服务
   • 支持访问速率、并发限制
   • 反向代理（适用2000WPV、并发连接1W/秒），简单的负载均衡和容错
   • 基于客户端IP 地址和 HTTP 基本认证的访问控制

Mac 安装Nginx

    
// 推荐使用`brew`, 安装`homebrew`
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// Homebrew 安装 Nginx 
brew install nginx
// Mac 下 Nginx的目录
cd /usr/local/etc/nginx
ll -al
vim nginx.conf
复制代码

homebrew详见

Nginx 参数列表

Event

Event Use支持的事件模型

Events详见

HTTP

Upstream

weight 默认为1.weight越大，负载的权重就越大。

Nginx Upstream状态

例如：

upstream news {
    server 127.0.0.1:9527 backup;
    server 127.0.0.1:9527 weight=1 max_fails=2 fail_timeout=3;
    ...
}
复制代码

use location：在server中添加

proxy_pass http://127.0.0.1:9527;
// 因为我的API接口是这个，such as /api/profile
// location 具体匹配规则详见后面
location ~ /api/ {
    proxy_pass http://127.0.0.1:9527;
}
复制代码

Server

Location

• =: 开头表示精确匹配，如 api 中只匹配根目录结尾的请求，后面不能带任何字符串.
• ^~ :开头表示uri以某个常规字符串开头，不是正则匹配.
• ~: 开头表示区分大小写的正则匹配.
• ~*: 开头表示不区分大小写的正则匹配.
• / : 通用匹配, 如果没有其它匹配,任何请求都会匹配到.

匹配优先级(高到低)

1. location =
2. location 完整路径
3. location ^~ 路径
4. location ~,~* 正则顺序
5. location 部分起始路径
6. /

详见Location配置

Reverse Proxy

当NGINX代理请求时，它会将请求发送到指定的代理服务器，获取响应并将其发送回客户端。可以使用指定的协议将请求代理到HTTP服务器（另一个NGINX服务器或任何其他服务器）或非HTTP服务器（可以运行使用特定框架（如PHP或Python）开发的应用程序）。

location  / some / path /  {
    proxy_pass  http://www.example.com:8080;
    
    proxy_set_header  Host  $ host ; 
    proxy_set_header  X-Real-IP  $ remote_addr ;
    
    // 禁用特定位置的缓冲
    proxy_buffering  off ;
    proxy_buffers  16  4k ; 
    proxy_buffer_size  2k ;
    
    proxy_bind  127.0.0.2 ; // IP地址也可以用变量指定
}
复制代码

将请求传递给非HTTP代理服务器，**_pass应使用相应的指令：

• fastcgi_pass 将请求传递给FastCGI服务器
• uwsgi_pass 将请求传递给uwsgi服务器
• scgi_pass 将请求传递给SCGI服务器
• memcached_pass 将请求传递给memcached服务器

详见Proxy

全局变量Global Variable

全局变量详见Alphabetical index of variables

修改 http server中的配置

启动Nginx

nginx
ps -ef | grep nginx
复制代码

重启Nginx

nginx -s reload
复制代码

关闭Nginx

nginx -s stop
复制代码

因为我已经启动了，所以就重启一下Nginx即可

Linux安装Nginx

Linux安装

常见的Linux命令

使用pstree查看当前服务器启动的进程

pstree
复制代码

查找Nginx的位置

ps -aux | grep nginx
复制代码

进入nginx的目录

然后配置nginx.conf文件即可

Docker安装Nginx

1. 查找 Docker Hub 上的 nginx镜像

   docker search nginx
   复制代码

   

2. 拉取官方镜像

   docker pull nginx
   复制代码

3. 查看当前镜像

   docker images nginx
   复制代码

   

Server Tree

tree -C -L 3 -I '*node_modules*'

├── server
│   ├── app.js
│   ├── db
│   │   ├── db.js
│   │   └── newsSql.js
│   ├── package-lock.json
│   ├── package.json
│   └── routers
│       ├── news.js
│       └── router.js
复制代码

Node Server

npm init
npm install express mysql body-parser -S
复制代码

1. app.js

   const express = require('express')
   const bodyParser = require('body-parser')
   const app = express()
   const router = require('./routers/router')
   
   const PORT = 9527
   
   app.use(bodyParser.json())
   app.use(bodyParser.urlencoded({ extended: true }))
   
   app.use(router)
   
   app.listen(PORT, () => {
     console.log(`Listen port at ${PORT}`)
   })
   
   复制代码

2. db.js -> Mysql配置

   module.exports = {
     mysql: {
       host: 'localhost',
       user: 'root',
       password: 'xxxx',
       database: 'test',
       port: '3306'
     }
   }
   复制代码

3. router.js

   const express = require('express')
   const router = express.Router()
   const news = require('./news')
   
   router.get('/api/news/queryAll', (req, res, next) => {
     news.queryAll(req, res, next)
   })
   
   router.get('/api/news/query', (req, res, next) => {
     news.queryById(req, res, next)
   })
   
   router.post('/api/news/add', (req, res, next) => {
     news.add(req, res, next)
   })
   
   router.post('/api/news/update', (req, res, next) => {
     news.update(req, res, next)
   })
   
   router.delete('/api/news/deleteNews', (req, res, next) => {
     news.deleteNews(req, res, next)
   })
   
   module.exports = router
   复制代码

4. newSql.js

   
   
   
       
   module.exports = {
     createNews: `CREATE TABLE news (
       id int(255) NOT NULL AUTO_INCREMENT,
       type varchar(255) CHARACTER SET utf8 NOT NULL,
       title varchar(255) CHARACTER SET utf8 NOT NULL,
       description varchar(255) CHARACTER SET utf8 NOT NULL,
       occur_time varchar(255) CHARACTER SET utf8 NOT NULL,
       url varchar(255) NOT NULL,
       newsImg varchar(255) NOT NULL,
       PRIMARY KEY (id)
     )`,
     queryAll: 'SELECT * FROM news',
     queryById: 'SELECT * FROM news WHERE id = ?',
     add: 'INSERT INTO news (type, title, description, occur_time, url, newsImg) VALUES (?, ?, ?, ?, ?, ?)',
     update: 'UPDATE news SET type = ?, title = ?, description = ?, occur_time = ?, url = ?, newsImg = ? WHERE id = ?',
     delete: 'DELETE FROM news WHERE id = ?'
   }
   复制代码

5. news.js

   const mysql = require('mysql')
   const db = require('../db/db')
   const $newsSql = require('../db/newsSql')
   
   let pool = mysql.createPool(db.mysql)
   
   let queryAll = (req, res, next) => {
     pool.getConnection((error, connect) => {
       if (error) {
         throw error
       } else {
         connect.query($newsSql.queryAll, (error, data) => {
           if (error) {
             throw error
           }
           res.json({
             code: '200',
             msg: 'success',
             data
           })
           connect.release()
         })
       }
     })
   }
   
   let queryById = (req, res, next) => {
     let id = +req.query.id
     pool.getConnection((error, connect) => {
       if (error) {
         throw error
       } else {
         connect.query($newsSql.queryById, id, (error, data) => {
           if (error) {
             throw error
           }
           res.json({
             code: '200',
             msg: 'success',
             data
           })
           connect.release()
         })
       }
     })
   }
   
   let add = (req, res, next) => {
     let rb = req.body
     let params = [rb.type, rb.title, rb.description, rb.occur_time, rb.url, rb.newsImg]
     pool.getConnection((error, connect) => {
       if (error) {
         throw error
       } else {
         connect.query($newsSql.add, params, (error, data) => {
           if (error) {
             throw error
           }
           res.json({
             code: '200',
             msg: 'success'
           })
           connect.release()
         })
       }
     })
   }
   
   let update = (req, res, next) => {
     let rb = req.body
     let params = [rb.type, rb.title, rb.description, rb.occur_time, rb.url, rb.newsImg, rb.id]
     pool.getConnection((error, connect) => {
       if (error) {
         throw error
       } else {
         connect.query($newsSql.update, [...params], (error, data) => {
           if (error) {
             throw error
           }
           res.json({
             code: '200',
             msg: 'success'
           })
           connect.release()
         })
       }
     })
   }
   
   let deleteNews = (req, res, next) => {
     let id = +req.query.id
     pool.getConnection((error, connect) => {
       if (error) {
         throw error
       } else {
         connect.query($newsSql.delete, id, (error, data) => {
           if (error) {
             throw error
           }
           res.json({
             code: '200',
             msg: 'success'
           })
           connect.release()
         })
       }
     })
   }
   
   module.exports = {
     queryAll,
     queryById,
     add,
     update,
     deleteNews
   }
   复制代码

Vue配置代理以及使用api

1. config/index.js 修改proxyTable

   module.exports = {
     dev: {
       proxyTable: {
         '/api': {
           target: 'http://127.0.0.1:9527',
           changeOrigin: true,
           pathRewrite: {
             '^/api': '/api'
           }
         }
       }
     }
   }
   复制代码

2. 使用axios调用接口

   import axios from 'axios'
   export default {
     created () {
       this._getAllNews()
     },
     methods: {
       _getAllNews () {
         axios.get('/api/news/queryAll').then(res => {
               if (+res.data.code === SCC_CODE) {
                 this.news = res.data.data
               }
             })
         }
       }
   }
   复制代码

Vue build打包

npm run build
复制代码

因为我的Server端是Express写的，启动Server需要使用Node，所以我们需要在服务器上安装Node.

Linux安装Node 8.x

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -sL https://deb.nodesource.com/setup_8.x | bash -
apt-get install -y nodejs

# Using Centos
curl -sL https://rpm.nodesource.com/setup_8.x | bash -
yum install -y nodejs
复制代码

具体安装各版本的Node详见

启动Node

此处我之前的命令执行错误，所以我需要kill这个进程

nohup node website/server/app.js &
复制代码

nohup:可以将程序以忽略挂起信号的方式运行起来，被运行的程序的输出信息将不会显示到终端。

无论是否将 nohup命令的输出重定向到终端，输出都将附加到当前目录的 nohup.out文件中。如果当前目录的 nohup.out 文件不可写，输出重定向到$HOME/nohup.out文件中。如果没有文件能创建或打开以用于追加，那么 command 参数指定的命令不可调用。如果标准错误是一个终端，那么把指定的命令写给标准错误的所有输出作为标准输出重定向到相同的文件描述符。

到这里，我们的Web，Node Server ，Nginx都已经配置并启动好了，我们只需要到浏览器输入你的服务器IP:8080即可.

Nginx众多概念详见官方词汇表

• 什么是应用交付？
• 什么是应用交付控制器（ADC）？
• 什么是应用程序服务器与Web服务器？
• 什么是缓存？
• 什么是云负载平衡？
• 什么是聚类？
• 什么是DevOps？
• 什么是分布式拒绝服务（DDoS）？
• 什么是DNS负载平衡？
• 什么是全局服务器负载平衡？
• 什么是高可用性？
• 什么是HTTP？
• 什么是HTTP / 2？
• 什么是混合负载均衡？
• 什么是第4层负载均衡？
• 什么是第7层负载平衡？
• 什么是负载平衡？
• 什么是媒体服务器？
• 什么是微服务？
• 什么是网络负载均衡器？
• 什么是NGINX？
• 什么是渐进式下载？
• 什么是反向代理服务器？
• 什么是反向代理与负载均衡器？
• 什么是循环负载平衡？
• 什么是面向服务的体系结构（SOA）？
• 什么是会话持久性？
• 什么是SSL负载均衡器？
• 什么是Web加速？
• 什么是Web服务器？