树莓派&Nginx服务器

前些日子跟着慕课网做了一个 Vue.js 仿饿了么 App 的实战项目，讲到部署的部分，正好手上有个树莓派闲置，那就搭个服务器试试吧。

目的

搭建服务器目的是将 Vue.js 实战项目部署在服务器上，加深对服务器部署的熟练度

硬件

树莓派 3b+ && 电源 && MBP && 路由器

连接

iTerm2 -> ssh 连接方式

依赖

linux (arm v7l) (32 位系统)
nodejs (v10.15.3)
npm (6.4.1)
nginx (nginx/1.10.3)

详细说明

连接树莓派

将树莓派开机，命令行运行 ifconfig，查看树莓派 IP 地址

得到 192.168.1.137

在 iterm2 窗口输入命令 ssh pi@192.168.1.137 输入密码 ***

连接成功

安装 nodejs

系统自带 nodejs 版本过老，为 v0.10 版本，所以要去官网下载最新的 nodejs

使用命令 uname -a 查询系统信息

1 2	pi@PI:~ $ uname -a Linux PI 4.14.50-v7+ #1122 SMP Tue Jun 19 12:26:26 BST 2018 armv7l GNU/Linux

在官网选中对应的 linux 二进制文件

在命令行输入 wget + 链接
然后 tar -xvf + 文件名 （-xvf 代表：解压，显示所有过程，使用档案名字）
mv 文件名 nodejs(重命名)
cd nodejs/bin
./node -v（此时系统 node 版本为 0.10，此处 node 版本为 10.15）
pwd 获取当前文件位置
ln -s /home/pi/nodejs/bin/node /usr/local/bin（修改环境变量）
ln -s /home/pi/nodejs/bin/npm /usr/local/bin
nano /etc/profile（修改 PATH 强制指向）
source /etc/profile
安装完成

部署项目

cd ~ 进入根目录
配置 git (不详细说了就)
从 git 克隆 Vue-sell 项目
cd Vue-sell (进入文件夹)
npm i (安装依赖)
npm run build (打包编译)
nohup node prod.server.js & (进程常驻，退出服务器进程不终结)
IP+端口可以访问

域名申请（此处不涉及）

nginx 线上部署

树莓派安装 nginx

命令 sudo apt-get install nginx

启动 nginx

命令 sudo /etc/init.d/nginx start

测试安装

局域网浏览器访问：192.168.1.137 搭建成功

修改 nginx 配置文件

命令 sudo nano /etc/nginx/sites-available/default

server {
  listen 80;  # 监听80端口
  server_name 192.168.1.137;    # 服务端名称（域名）

  location / {
    rewrite ^/ https://github.com/XDP; # 重定向
  }

  location /sell/ { # 反向代理
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_pass http://127.0.0.1:8900/;  # 定位到本机8900端口
  }
}
# 注意：nodejs的服务依然需要打开，不然无法获取数据

重新加载

命令 sudo /etc/init.d/nginx reload

关闭 nginx

命令 sudo /etc/init.d/nginx stop

断开连接

control + D 断开和树莓派连接

测试

连接路由器

访问192.168.1.137，成功重定向至 Github

访问192.168.1.137/sell/，反向代理至 Vue-sell

添加项目

将之前写过的 List-App 项目添加至服务器的 9000 端口

编写 nodejs 服务器

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, '')))

app.listen(9000, () => {
  console.log('App listening at port 8080')
})

转移到树莓派

git pull 和 Vue-sell 是一样的

然后运行 npm i 以及 nohup node prod.server.js &

修改 nginx 配置

location /list/ { # 反向代理
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_set_header X-Nginx-Proxy true;
  proxy_pass http://127.0.0.1:9000/;  # 定位到本机9000端口
}