natapp结合nginx使用一个域名跑两个服务

引言

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

natapp

  • 申请账号
    进入官网,注册登录。
  • 购买隧道
    没有大要求的话,买9元/月的就足以满足个人使用了。
    natapp结合nginx使用一个域名跑两个服务_第1张图片
  • 购买二级域名
    二级域名根据自己本机的配置情况进行设置,主要是本机的映射地址和端口,以及绑定购买的隧道。
  • 下载
    随后去客户端下载对应的版本。
    natapp结合nginx使用一个域名跑两个服务_第2张图片
  • 配置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使用一个域名跑两个服务)