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

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

Nginx是以event（事件）处理模型为基础的模块。它为了支持跨平台，抽象出了event模块。它支持的event处理类型有：AIO（异步IO），/dev/poll（Solaris 和Unix特有），epoll（Linux特有），eventport（Solaris 10特有），kqueue（BSD特有），poll，rtsig（实时信号），select等。
它的作用是监听accept后建立的连接，对读写事件进行添加删除。事件处理模型和Nginx的非阻塞IO模型结合在一起使用。当IO可读可写的时候，相应的读写事件就会被唤醒，此时就会去处理事件的回调函数。

Event Use支持的事件模型

Events详见

HTTP

可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。

Upstream

它的作用是实现在轮询和客户端IP之间的后端服务器负荷平衡。

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

配置虚拟主机的相关参数，一个http中可以有多个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

多谢小伙伴给提出的问题(详见评论区)，reload和resatrt是两个不同的概念。

1. reload
   重新加载conf文件，不中断Nginx服务，conf文件有问题则加载上一次的conf.
2. restart
   会根据配置文件，重启整个Nginx服务，造成服务器中断一段时间，当然会因为conf文件问题报错。

关闭Nginx

nginx -s stop

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

Linux安装Nginx

Linux安装

常见的Linux命令

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

pstree

查找Nginx的位置

ps -aux | grep nginx

进入nginx的目录

然后配置nginx.conf文件即可

http {    
    upstream add-news {
        server 127.0.0.1:9527;
    }

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root   /Users/rainy/Desktop/MyWork/Work/website/dist;
        index index.html index.htm;

        location / {
            # root   html;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }

        location ~ /api/ {
            proxy_pass http://127.0.0.1:9527;
        }
                # 我的图片存放在本地服务器上的路径👇
        location /news-images/ {
            expires 24h;
            root /Users/rainy/Desktop/MyWork/Work/website/server/;
            autoindex on;
        }
        # 通过转发某服务器上的图片 -> https://localhost:9527/*/*.png
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 24h;
            proxy_pass https://localhost:9527;
            access_log /root/nginx/logs/images.log;
            proxy_store on;
            proxy_store_access user:rw group:rw all:rw;
            proxy_redirect          off;
            proxy_set_header        Host 127.0.0.1;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            client_max_body_size    10m;
            client_body_buffer_size 1280k;
            proxy_connect_timeout   900;
            proxy_send_timeout      900;
            proxy_read_timeout      900;
            proxy_buffer_size       40k;
            proxy_buffers           40 320k;
            proxy_busy_buffers_size 640k;
            proxy_temp_file_write_size 640k;
        }
    }
}

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()
         })
       }
     })
   }
   let mkdirSync = dirname => {
    if (fs.existsSync(dirname)) {
        return true
    } else {
        if (mkdirSync(path.dirname(dirname))) {
            fs.mkdirSync(dirname)
             return true
        }
    }
    return false
    }
   
    let uploadImg = (req, res, next) => {
        const form = new formidable.IncomingForm()
        form.encoding = 'utf-8'
        form.keepExtensions = true
        form.parse(req, (err, fileds, files) => {
            if (err) {
                console.log(err)
            }
            let imgPath = fs.readFileSync(files.file.path)
            let filename = path.resolve(__dirname, `../${NEWS_IMAGES_PATH}/${files.file.name}`)
            if (mkdirSync(NEWS_IMAGES_PATH)) {
                fs.writeFile(filename, imgPath, (err) => {
                    if (err) {
                    console.log(err)
                    }
                    res.json({
                        code: '200',
                        msg: 'success',
                        files: files.file,
                    })
                })
            })
        }
    }
   
   module.exports = {
     queryAll,
     queryById,
     add,
     update,
     deleteNews,
     uploadImg
   }

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服务器？