Nginx + Node + Vue 部署初试(修改)
趁着爸妈做年夜饭之前,把之前做的笔记贴出来,新的一年到了,祝大家
Nginx
+ Node
+ Vue
部署初试
知乎
个人博客
Github
日常学习笔记
Nginx
定义
异步框架的 Web服务器,也可以用作反向代理,负载平衡器 , HTTP缓存, 媒体流等的开源软件。它最初是一个旨在实现最高性能和稳定性的
Web
服务器。除了HTTP
服务器功能外,NGINX
还可以用作电子邮件(IMAP
,POP3
和SMTP
)的代理服务器以及HTTP
,TCP
和UDP
服务器的反向代理和负载平衡器。特点
- 更快
- 高扩展性,
Nginx
的模块都是嵌入到二进制文件中执行 - 高可靠性
- 低内存消耗
- 单机支持10万次的并发连接
- 热部署,
master
管理进行与work
工作进程分离设计,因此具备热部署功能 - 最自由的
BSD
许可协议
功能
- 静态服务(
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 参数列表
配置参数属性 | 解释说明 | 参数列表 |
---|---|---|
user | 设置nginx服务的系统使用用户 |
nobody (注意:此处用户如果比启动Nginx 的用户权限低,你需要使用当前用户重启Nginx )nginx -s stop 关闭nginx -> nginx 启动-> ps aux | grep nginx 查看启动用户
|
worker_processes | 开启的线程数 | 一般与服务器核数保持一致 |
error_log | 定位全局错误日志文件 | 错误日志定义等级,[ debug | info notice | warn | error | crit ],debug输出最多,crir输出最少 |
pid | 指定进程id的存储文件位置 | |
worker_rlimit_nofile | 指定一个nginx进程打开的最多文件描述符数目,受系统进程的最大打开文件数量限制 | |
events | 包含Nginx中所有处理连接的设置 | |
http | Nginx http处理的所有核心特性 |
Event
配置参数属性 | 解释说明 | 参数列表 |
---|---|---|
worker_connections | 定义每个进程的最大连接数,受系统进程的最大打开文件数量限制 |
单个后台worker process进程的最大并发链接数 (最大连接数= worker_processes * worker_connections) 在反向代理环境下: 最大连接数 = worker_processes * worker_connections / 4 |
use | 工作进程数 | [ epoll | /dev/poll | poll | eventport | kqueue | select | rtsig ] |
multi_accept | 一个新连接通知后接受尽可能多的连接 | on / off |
accept_mutex | 开启或者禁用使用互斥锁来打开sockets | on / off |
Event Use
支持的事件模型
Events
详见
HTTP
配置参数属性 | 解释说明 | 参数列表 |
---|---|---|
include | 主模块指令,实现对配置文件所包含的文件的设定,可以减少主配置文件的复杂度,DNS主配置文件中的zonerfc1912,acl基本上都是用include语句 | |
default_type | 核心模块指令 | 默认设置为二进制流,也就是当文件类型未定义时使用这种方式 |
log_format | 日志格式的设定 | 日志格式的名称,可自行设置,后面引用 |
access_log | 引用日志 | 引用log_format设置的名称 |
keepalive_timeout | 设置客户端连接保存活动的超时时间 | 0是无限制 |
sendfile | 开启高效文件传输模式 | on / off |
tcp_nopush | 开启防止网络阻塞 | on / off |
tcp_nodelay | 开启防止网络阻塞 | on / off |
upstream | 负载均衡 | |
server | Nginx的server虚拟主机配置 |
Upstream
配置参数属性 | 解释说明 |
---|---|
轮询(默认) | 每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题。 |
weight | 指定轮询几率,weight和访问比率成正比,用于后端服务器性能不均的情况 |
ip_hash | 每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题。 |
fair(第三方) | 按后端服务器的响应时间来分配请求,响应时间短的优先分配。 |
url_hash(第三方) | 按访问url的hash结果来分配请求,使每个url定向到同一个后端服务器,后端服务器为缓存时比较有效。 |
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;...
}
复制代码
配置参数属性 | 解释说明 |
---|---|
backup | 预留的备份服务器 |
down | 当前的server暂时不参与负载均衡 |
fail_timeout | 经过max_fails 失败后,服务暂停的时间 |
max_conns | 限制最大的接收的连接数 |
max_fails | 允许请求失败的次数 |
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
配置参数属性 | 解释说明 | 参数列表 |
---|---|---|
listen | 监听端口 | http -> 80 / https -> 443 |
server_name | 设置主机域名 | localhost |
charset | 设置访问的语言编码 | |
access_log | 设置虚拟主机访问日志的存放路径及日志的格式 | |
location | 设置虚拟主机的基本信息 |
Location
配置参数属性 | 解释说明 | 参数列表 |
---|---|---|
root | 设置虚拟主机的网站根目录 | Vue项目的根目录/Users/rainy/Desktop/MyWork/Work/cloudwiz-website/dist |
index | 设置虚拟主机默认访问的网页 | index.html index.htm |
proxy | 通过不同协议将请求从NGINX传递到代理服务器 |
=
: 开头表示精确匹配,如api
中只匹配根目录结尾的请求,后面不能带任何字符串.^~
:开头表示uri
以某个常规字符串开头,不是正则匹配.~
: 开头表示区分大小写的正则匹配.~*
: 开头表示不区分大小写的正则匹配./
: 通用匹配, 如果没有其它匹配,任何请求都会匹配到.
匹配优先级(高到低)
location =
location 完整路径
location ^~ 路径
location ~,~* 正则顺序
location 部分起始路径
/
详见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_pass | 将请求传递给HTTP代理服务器 | |
proxy_set_header | 传递请求标头 |
默认情况下,NGINX在代理请求中重新定义两个头字段“Host”和“Connection”,并删除其值为空字符串的头字段。“Host”设置为$proxy_host 变量,“Connection”设置为close 。
|
proxy_buffering
|
负责启用和禁用缓冲 | on / off |
proxy_buffers | 请求分配的缓冲区的大小和数量 | |
proxy_buffer_size | 代理服务器的响应的第一部分存储在单独的缓冲区大小 | 通常包含一个相对较小的响应头,并且可以比其余响应的缓冲区小。 |
proxy_bind | 接受来自特定IP网络或IP地址范围的连接 |
指定proxy_bind 必要网络接口的指令和IP地址
|
详见Proxy
全局变量Global Variable
变量名 | 变量含义 |
---|---|
$args | 请求中的参数 |
$content_length |
HTTP 请求信息里的Content-Length
|
$content_type |
请求信息里的Content-Type
|
$host |
请求信息中的Host ,如果请求中没有Host 行,则等于设置的服务器名
|
$http_cookie |
cookie 信息
|
$http_referer | 引用地址 |
$http_user_agent | 客户端代理信息 |
$remote_addr | 客户端地址 |
$remote_port | 客户端端口号 |
$remote_user | 客户端用户名,认证用 |
$request_method |
请求的方法,比如GET 、POST 等
|
$request_uri |
完整的原始请求URI (带参数)
|
$scheme |
请求方案,http 或https
|
$server_addr |
接受请求的服务器的地址,如果没有用listen 指明服务器地址,使用这个变量将发起一次系统调用以取得地址(造成资源浪费);
|
$server_protocol |
请求的协议版本,HTTP/1.0 或HTTP/1.1
|
$uri |
请求中的当前URI , $uri 在请求处理期间 ,值可能会发生变化,例如在执行内部重定向或使用索引文件时
|
全局变量详见Alphabetical index of variables
修改 http
server
中的配置
启动Nginx
nginx
ps -ef | grep nginx
复制代码
重新加载修改后的Nginx
配置文件
nginx -s reload
复制代码
多谢小伙伴给提出的问题(详见评论区),reload
和resatrt
是两个不同的概念。
reload
重新加载conf
文件,不中断Nginx
服务,conf
文件有问题则加载上一次的conf
.restart
会根据配置文件,重启整个Nginx
服务,造成服务器中断一段时间,当然会因为conf
文件问题报错。
关闭Nginx
nginx -s stop
复制代码
因为我已经启动了,所以就重启一下Nginx
即可
Linux
安装Nginx
Linux
安装
常见的Linux
命令
使用pstree
查看当前服务器启动的进程
pstree
复制代码
查找Nginx
的位置
ps -aux | grep nginx
复制代码
进入nginx
的目录
然后配置nginx.conf
文件即可
Docker
安装Nginx
查找 Docker Hub 上的
nginx
镜像docker search nginx 复制代码
拉取官方镜像
docker pull nginx 复制代码
查看当前镜像
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
复制代码
app.js
const express = require('express') const bodyParser = require('body-parser') const app = express() const router = require('./routers/router')const PORT = 9527app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended: true }))app.use(router)app.listen(PORT, () => {console.log(`Listen port at ${PORT}`) })复制代码
db.js
->Mysql
配置module.exports = {mysql: {host: 'localhost',user: 'root',password: 'xxxx',database: 'test',port: '3306'} } 复制代码
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 复制代码
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 = ?' } 复制代码
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.idpool.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.bodylet 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.bodylet 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.idpool.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
config/index.js
修改proxyTable
module.exports = {dev: {proxyTable: {'/api': {target: 'http://127.0.0.1:9527',changeOrigin: true,pathRewrite: {'^/api': '/api'}}}} } 复制代码
使用
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服务器?
Nginx + Node + Vue 部署初试(修改)相关推荐
- centOS7下 安装nodejs+nginx+mongodb+pm2部署vue项目
一.购买服务器并远程连接 1.购买服务器和域名 可以选择阿里云或者是其他的厂商的服务器.然后会获得服务器ip地址,用户名和密码. 购买域名,将域名绑定到ip地址上. 2.下载xshell,winscp ...
- SpringBoot + Vue + nginx项目一起部署
SpringBoot + Vue + nginx项目一起部署 SpringBoot + Vue 一起部署到 nginx 1.后端项目部署: (1) Java项目打包上传到 服务器,开启服务 java ...
- VUE部署nginx解决跨域问题
VUE部署nginx解决跨域问题 Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图. VUE配置的代理 Vue的代理跨域问题,需要确定的是在开发 ...
- Node项目部署正常启动后不能访问的问题
Node项目部署正常启动后不能访问的问题 Node项目部署之后,发现访问不了,pm2 list也是正常的,vue项目都可以正常访问,就是请求后台nodejs的时候就报404. 原以为是pm2的问题,先 ...
- 前端开发者应该知道的 Centos/Docker/Nginx/Node/Jenkins 操作
点击上方 程序员成长指北,关注公众号 回复1,加入高级 Node 进阶交流群 来源:ask_the_sky https://juejin.cn/post/6951684431597797389 服务器 ...
- 超实用,一口气学会 Centos/Docker/Nginx/Node/Jenkins 等基础操作
作者:ask_the_sky https://juejin.cn/post/6951684431597797389 服务器作为开发的一环,并且现在非常多的商业公司部署在生产环境上的服务器都是CentO ...
- 前端人应该知道的 Centos/Docker/Nginx/Node/Jenkins 的基本操作
点击上方关注 前端技术江湖,一起学习,天天进步 来源:ask_the_sky https://juejin.cn/post/6951684431597797389 服务器作为开发的一环,并且现在非常多 ...
- Jenkins Bitbucket Vue 部署
一.环境版本 组件 版本 Ubuntu 20.04 NodeJS 16.13.0 npm 8.1.0 cnpm 7.1.0 二.安装NodeJS # 指定NodeJS安装版本,修改版本只需修改setu ...
- 搭建K8S集群之node节点部署
在上一篇文章中,我们完成了K8S系列之K8S集群之Master节点部署,在这篇文章中,我们将开始部署Node节点相关的组件.在node节点上,需要部署kubelet和kube-proxy两个K8S组件 ...
最新文章
- pytorch 神经网络训练注意最后一批次输出的数据体量
- 为什么一个星期是7天
- Linux vim光标快速移动指定行数G
- mysql_ping与mysql长连接
- JavaScript模态对话框类(拖拽时动画)
- Oracle性能调优
- 人生永无止境的意思是什么_《永无止境》中艾迪真的成功改进了NZT吗?
- Windows Phone 获取联系人
- Determining if ip address is already in use for device eth0
- Codeforces Round #379 (Div. 2) 总结分享
- 一、数据库应用系统分析及规划
- OpenCV + VS + Python
- css加号图标_css样式画加号和减号(+和-)效果
- 【数据仓库】1.数据模型
- fastposter 2.2.0 新版本发布 电商级海报生成器
- 复盘:智能座舱系列文五- 它的3种交互方式之隐式交互
- 刀与剑-COM返回数组
- 强制关机后进不了系统
- 【Python爬虫】爬取微信公众号文章信息准备工作
- Java 驼峰命名转下划线命名(能正确处理连续HTTP等大写)