1. 首页
  2. IT资讯

Nginx + Node + Vue 部署初试(2019-03-18修改)

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

Nginx + Node + Vue 部署初试(2019-03-18修改)
Nginx + Node + Vue 部署初试(2019-03-18修改)

知乎

个人博客

Github

日常学习笔记

Nginx

  1. 定义

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

  1. 特点
  2. 更快
  3. 高扩展性, Nginx的模块都是嵌入到二进制文件中执行
  4. 高可靠性
  5. 低内存消耗
  6. 单机支持10万次的并发连接
  7. 热部署, master管理进行与work工作进程分离设计,因此具备热部署功能
  8. 最自由的BSD许可协议
  9. 功能
  10. 静态服务(css , js , html, images, videos
  11. SSLTLS SNI支持
  12. HTTP/HTTPS, SMTP, IMAP/POP3 反向代理
  13. FastCGI反向代理
  14. 负载均衡
  15. 页面缓存(CDN
  16. 支持gzipexpirse
  17. 支持 keep-alive 和管道连接
  18. 基于 PCRErewrite 重写模块
  19. 带宽限制
  20. 基于IP 和名称的虚拟主机服务
  21. 支持访问速率、并发限制
  22. 反向代理(适用2000WPV、并发连接1W/秒),简单的负载均衡和容错
  23. 基于客户端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

"https://brew.sh/">homebrew详见

Nginx + Node + Vue 部署初试(2019-03-18修改)

Nginx 参数列表

Nginx + Node + Vue 部署初试(2019-03-18修改)

Event

Nginx是以event(事件)处理模型为基础的模块。它为了支持跨平台,抽象出了event模块。它支持的event处理类型有:AIO(异步IO),/dev/pollSolarisUnix特有),epollLinux特有),eventportSolaris 10特有),kqueueBSD特有),pollrtsig(实时信号),select等。它的作用是监听accept后建立的连接,对读写事件进行添加删除。事件处理模型和Nginx的非阻塞IO模型结合在一起使用。当IO可读可写的时候,相应的读写事件就会被唤醒,此时就会去处理事件的回调函数。

Nginx + Node + Vue 部署初试(2019-03-18修改)

Event Use支持的事件模型

Nginx + Node + Vue 部署初试(2019-03-18修改)

f="https://www.myfreax.com/nginx-event-module-introduction/">Events详见

HTTP

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

Nginx + Node + Vue 部署初试(2019-03-18修改)

Upstream

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

Nginx + Node + Vue 部署初试(2019-03-18修改)

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;     ... }
Nginx + Node + Vue 部署初试(2019-03-18修改)

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

Nginx + Node + Vue 部署初试(2019-03-18修改)

Location

配置请求的路由,以及各种页面的处理情况。

Nginx + Node + Vue 部署初试(2019-03-18修改)
  • =: 开头表示精确匹配,如 api 中只匹配根目录结尾的请求,后面不能带任何字符串.
  • ^~ :开头表示uri以某个常规字符串开头,不是正则匹配.
  • ~: 开头表示区分大小写的正则匹配.
  • ~*: 开头表示不区分大小写的正则匹配.
  • / : 通用匹配, 如果没有其它匹配,任何请求都会匹配到.

匹配优先级(高到低)

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

href="seanlook.com/2015/05/17">详见Location配置

Reverse Proxy

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

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服务器
Nginx + Node + Vue 部署初试(2019-03-18修改)

href="docs.nginx.com/nginx/ad">详见Proxy

全局变量Global Variable

Nginx + Node + Vue 部署初试(2019-03-18修改)
Nginx + Node + Vue 部署初试(2019-03-18修改)

全局变量详见Alphabetical index of variables

修改 http server中的配置

Nginx + Node + Vue 部署初试(2019-03-18修改)

启动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即可

Nginx + Node + Vue 部署初试(2019-03-18修改)

Linux安装Nginx

ef="http://www.runoob.com/linux/nginx-install-setup.html">Linux安装

href="man.linuxde.net/par/2">常见的Linux命令

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

pstree

Nginx + Node + Vue 部署初试(2019-03-18修改)

查找Nginx的位置

ps -aux | grep nginx

Nginx + Node + Vue 部署初试(2019-03-18修改)

进入nginx的目录

Nginx + Node + Vue 部署初试(2019-03-18修改)

Nginx + Node + Vue 部署初试(2019-03-18修改)

然后配置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镜像

nginx docker search nginx

Nginx + Node + Vue 部署初试(2019-03-18修改)

  1. 拉取官方镜像

nginx docker pull nginx

  1. 查看当前镜像

nginx docker images nginx

Nginx + Node + Vue 部署初试(2019-03-18修改)

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

Nginx + Node + Vue 部署初试(2019-03-18修改)

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}`)    })
  1. db.js -> Mysql配置
module.exports = {      mysql: {        host: 'localhost',        user: 'root',        password: 'xxxx',        database: 'test',        port: '3306'      }    }
  1. 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
  1. 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 = ?'    }
  1. news.js
const mysql = require('mysql') const formidable = require('formidable') const fs = require('fs') const path = require('path') const db = require('../db/db') const $newsSql = require('../db/newsSql')  let pool = mysql.createPool(db.mysql)  let NEWS_IMAGES_PATH = 'news-images'  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'            }          }        }      } }
  1. 使用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

Nginx + Node + Vue 部署初试(2019-03-18修改)

因为我的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

"https://my.oschina.net/idoop/blog/1545011">具体安装各版本的Node详见

启动Node

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

nohup node website/server/app.js &

Nginx + Node + Vue 部署初试(2019-03-18修改)

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

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

Nginx + Node + Vue 部署初试(2019-03-18修改)

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

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

原文始发于:Nginx + Node + Vue 部署初试(2019-03-18修改)

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/26012.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code