关于前端:natapp结合nginx使用一个域名跑两个服务

为了外网运行自测的小 demo，且波及前后端两个服务，而 natapp 只购买了一个域名和隧道，简而言之，为了省钱，故钻研了natapp 配合 nginx 应用的办法。

申请账号
进入官网，注册登录。
购买隧道
没有大要求的话，买 9 元 / 月的就足以满足集体应用了。
购买二级域名
二级域名依据本人本机的配置状况进行设置，次要是本机的映射地址和端口，以及绑定购买的隧道。
下载
随后去客户端下载对应的版本。

配置 config.ini
在下载的 natapp 同级目录下，下载 config.ini 文件，或者间接复制我上面的内容到新建的 config.ini 文件中。只须要配置 authtoken 即可。

# 将本文件搁置于 natapp 同级目录 程序将读取 [default] 段
#在命令行参数模式如 natapp -authtoken=xxx 等雷同参数将会笼罩掉此配置
#命令行参数 -config= 能够指定任意 config.ini 文件
[default]
authtoken=**                      #对应一条隧道的 authtoken
clienttoken=                    #对应客户端的 clienttoken, 将会疏忽 authtoken, 若无请留空,
log=none                        #log 日志文件, 可指定本地文件, none= 不做记录,stdout= 间接屏幕输入 , 默认为 none
loglevel=ERROR                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

运行
命令行工具 cd natapp 目录，而后输出 ./natapp 即可启动服务。此时关上对应的域名地址即可拜访到本地启动的对应服务。

nginx
下载
进入下载地址，找一个版本装置即可。mac 下运行 brew install nginx 命令装置。
判断是否装置胜利
终端输出 nginx 启动服务，控制台输出 localhost(未配置 nginx.conf 的端口默认为 80)能进入 nginx 官网即示意装置胜利。
配置 nginx.conf
找到 nginx 装置目录，关上 nginx.conf 文件。mac 下，终端运行 open /usr/local/Cellar/nginx 可关上 nginx 装置目录，此处运行 cat /usr/local/etc/nginx/nginx.conf 关上配置文件，配置如下：
```
# nginx 80 端口配置（监听 a 二级域名）server {
  listen 80;
  server_name phoenixhg.natapp1.cc;
  # 依据我的项目名辨别代理的地址与端口
  location / {
      proxy_pass http://localhost:9000;
      index index.html index.htm;
  }
  # 依据我的项目名辨别代理的地址与端口
  location /socket.io/ {
      proxy_pass http://localhost:3001;
      #配置 Nginx 反对 webSocket 开始
      proxy_set_header Host $http_host;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}
```
listen监听咱们的端口，我的前端我的项目端口为 80，故应用 80 端口，server_name指向咱们的后面配置好的 natapp 域名。location配置了前后端我的项目代理，例如这里我的前端我的项目启动的服务地址为 localhost:9000，后端为localhost:3001，通过proxy_pass 配置好即可，保留后重启 nginx 服务（nginx -s reload），此时浏览器间接拜访 phoenixhg.natapp1.cc 查看前端部署的我的项目地址。前端申请 api 地址可改为通过域名拜访 phoenixhg.natapp1.cc/socket.io/。

一个小点：配置 socket.io 后端服务的时候，location 肯定要用 /socket.io/ 名称才可胜利连贯上 socket 服务，且 socket 后端代理必须配置上述的四行代码才反对。

功败垂成

非局域网也能拜访到本人的我的项目了！

引言

natapp

nginx

功败垂成