详解如何部署H5游戏到nginx服务器

在自学游戏开发的路上,最有成就感的时刻就是将自己的小游戏做出来分享给朋友试玩,原生的游戏开可以打包分享,小游戏上线流程又长,那 H5 小游戏该怎么分享呢?本文就带大家通过 nginx 将构建好的 H5 游戏托管的阿里云上。

内容大纲:

  1. 下载、配置 nginx
  2. 上传游戏构建文件到云服务器
  3. nginx 通过端口设置多个虚拟主机

开发环境:

阿里云服务器:Ubuntu 14.04.5 LTS (GNU/Linux 4.4.0-93-generic x86_64)

nginx:nginx/1.4.6 (Ubuntu)

WinSCP:5.15.3

步骤详解:

1.下载、配置 nginx

开始之前先简单的说一下什么是 nginx,nginx 是一款轻量级的 Web 服务器/ 反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行,其特点是占有内存少, 并发能力强。

反向代理就是以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给 internet 上请求连接的客户端,此时代理服务器对外就表现为一个服务器。

负载均衡其实就是将流量分发到多个服务器上执行,减轻每台服务器的压力,多台服务器共同完成工作任务,从而提高了数据的吞吐量,从而扩展了网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。

使用 nginx 我们可以做到动静分离,将万年不动的静态资源放到 nginx 中,而动态资源运行在 TomCat 服务器中,当访问静态资源时,直接请求 nginx 就可以了,不在需要去请求 TomCat 这样服务器的压力又小了。

目前支持两种安装方式,一种是基于 APT 源安装,一种是通过源码包编译安装,但是如果想要安装最新版本的就必须下载源码包编译安装。本文采用的是基于 APT 源安装方式,想了解另外一种安装方式的小伙伴可自行百度。

1.1 更新软件源

sudo apt-get update

1.2 安装 nginx

sudo apt-get install nginx

注:安装好的文件位置:

/usr/sbin/nginx:主程序

/etc/nginx:存放配置文件

/usr/share/nginx:存放静态文件

/var/log/nginx:存放日志

1.3 查看 nginx 是否安装成功

nginx -v

1.4 启动 nginx

service nginx start

1.5 启动后,在浏览器输入服务器的公网 IP,即可看到 nginx 的欢迎页面,至此nginx安装成功。

2.上传游戏构建文件到云服务器

2.1 上传文件到云服务器需要用到一个工具:WinSCP,软件我已经上传到百度云,公众号后台回复「WinSCP」即可获得,无脑操作即可安装。

2.2 上传文件之前需要先在云服务器中创建一个文件夹用来一会放置游戏构建文件,因为一会要放置两个游戏的构建文件,所以我又创建了两个子文件夹,目录如下(我是创建在了根目录下,你可以根据实际情况自行创建。):

/www/80

/www/81

2.3 创建好文件夹后就可以使用 WinSCP 上传游戏构建文件了,准备两个构建好的游戏,将构建文件全选后右击上传到上面创建的目录即可:

3.nginx 通过端口设置多个虚拟主机

开始之前同样对 nginx 的配置文件先做简单的说明:

...       #全局块

events {     #events块
  ...
}

http   #http块
{
  ...  #http全局块
  server    #server块
  {
    ...    #server全局块
    location [PATTERN]  #location块
    {
      ...
    }
    location [PATTERN]
    {
      ...
    }
  }
  server
  {
   ...
  }
  ...   #http全局块
}

全局块:配置影响nginx全局的指令。一般有运行nginx服务器的用户组,nginx进程pid存放路径,日志存放路径,配置文件引入,允许生成worker process数等。

events块:配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数,选取哪种事件驱动模型处理连接请求,是否允许同时接受多个网路连接,开启多个网络连接序列化等。

http块:可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。如文件引入,mime-type定义,日志自定义,是否使用sendfile传输文件,连接超时时间,单连接请求数等。

server块:配置虚拟主机的相关参数,一个http中可以有多个server。

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

下面给大家上一个配置文件,作为理解:

########### 每个指令必须有分号结束。#################
#user administrator administrators; #配置用户或者组,默认为nobody nobody。
#worker_processes 2; #允许生成的进程数,默认为1
#pid /nginx/pid/nginx.pid;  #指定nginx进程运行文件存放地址
error_log log/error.log debug; #制定日志路径,级别。这个设置可以放入全局块,http块,server块,级别以此为:debug|info|notice|warn|error|crit|alert|emerg
events {
  accept_mutex on;  #设置网路连接序列化,防止惊群现象发生,默认为on
  multi_accept on; #设置一个进程是否同时接受多个网络连接,默认为off
  #use epoll;   #事件驱动模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport
  worker_connections 1024;  #最大连接数,默认为512
}
http {
  include    mime.types;  #文件扩展名与文件类型映射表
  default_type application/octet-stream; #默认文件类型,默认为text/plain
  #access_log off; #取消服务日志
  log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定义格式
  access_log log/access.log myFormat; #combined为日志格式的默认值
  sendfile on;  #允许sendfile方式传输文件,默认为off,可以在http块,server块,location块。
  sendfile_max_chunk 100k; #每个进程每次调用传输数量不能大于设定的值,默认为0,即不设上限。
  keepalive_timeout 65; #连接超时时间,默认为75s,可以在http,server,location块。

  upstream mysvr {
   server 127.0.0.1:7878;
   server 192.168.10.121:3333 backup; #热备
  }
  error_page 404 https://www.baidu.com; #错误页
  server {
    keepalive_requests 120; #单连接请求上限次数。
    listen    4545;  #监听端口
    server_name 127.0.0.1;  #监听地址
    location ~*^.+$ {    #请求的url过滤,正则匹配,~为区分大小写,~*为不区分大小写。
      #root path; #根目录
      #index vv.txt; #设置默认页
      proxy_pass http://mysvr; #请求转向mysvr 定义的服务器列表
      deny 127.0.0.1; #拒绝的ip
      allow 172.18.5.54; #允许的ip
    }
  }
}

利用虚拟主机技术,可以把一台真正的主机分成许多 ” 虚拟 ” 的主机,每一台虚拟主机都具有独立的域名和 IP 地址,具有完整的 Internet 服务器( www, FTP,email )功能。虚拟主机之间完全独立,在外界看来,每一台虚拟主机和一台独立的主机完全一样。

虚拟主机共分为三种:基于 IP 的虚拟主机,基于端口的虚拟主机和基于名称的虚拟主机,本文采用的是基于端口设置多个虚拟主机,想了解另外两种设置方式的小伙伴可自行百度。

3.1 本文放开的是 80 和 81 端口,80 端口是默认的端口,开始之前优先要在阿里云服务器打开 81 端口:

3.2 阿里云服务器配置好之后,就可以远程登录服务器去看是否开启端口成功了,如果没有检测到端口的话,还需要手动开启:

查看状态:

iptables -L -n

如果没有 81 端口,则需要打开 81 端口:

打开端口:

iptables -I INPUT -p tcp --dport 81 -j ACCEPT

关闭端口:

iptables -D INPUT -p tcp --dport 81 -j ACCEPT

3.3 打开端口后,加下来需要配置 nginx.conf 文件了,上面已经对 nginx.conf 配置文件进行了简单的介绍,想要通过端口设置多个虚拟主机,只需要在添加一个 server 对新打开的端口进行监听即可:

  server {
    listen    80;  // 监听 80 端口
    server_name test80.superyu.com;
    root  /www/80;  // 项目目录

    location / {
      index index.html index.htm;
    }

    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }
  }

  server {
    listen    81;  // 监听 81 端口
    server_name test81.superyu.cn;
    root  /www/81;  // 项目目录

    location / {
      index index.html index.htm;
    }

    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }
  }

3.4 配置好 nginx.conf 文件后,重启 nginx 就可以查看效果了:

输入下面命令即可在不关闭 nginx 的情况下更新配置文件:

nginx -s reload

3.5 在编辑器输入 http://公网:端口 可以看到效果如下:

最后:

到此这篇关于详解如何部署H5游戏到nginx服务器的文章就介绍到这了,更多相关nginx部署h5内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 用uWSGI和Nginx部署Flask项目的方法示例

    概况 在开发过程中,我们一般直接用Python命令直接运行Flask程序.这样的运行只适合我们开发,方便我们调试.一旦程序部署到线上,这样运行的Flask程序性能会比较低.可以采用uWSGI+Nginx进行部署. uWSGI 在部署之前,我们得先了解几个概念 wsgi web应用程序之间的接口.它的作用就像是桥梁,连接在web服务器和web应用框架之间. uwsgi 是一种传输协议,用于定义传输信息的类型. uWSGI 是实现了uwsgi协议WSGI的web服务器. 部署 首先准备一个flask

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • Nginx中部署Angular项目遇到的坑巨坑

    网上搜索Angular 项目编译后部署到 Nginx 中的方法,多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题,那么完整的server 代码是: server { listen 80; server_name 192.168.190.131; #sendfile on; #charset koi8-r; access_log /var/log/nginx/host.access.log main; location / { r

  • vue项目部署到nginx/tomcat服务器的实现

    开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署. 1.router(history)模式vue项目部署到nginx 1)修改router模式为history(默认为hash) const router = new VueRouter({ routes, mode: 'history' }); 对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解 2)修改config/ind

  • 在Nginx上部署ThinkPHP项目教程

    前段时间用Apache配合TP开发了一个小型网站,也算是我使用TP的第一次实战.我习惯使用pathinfo模式,本地运行一切正常,然而部署到服务器上时,由于对方使用的是Nginx,默认是不支持ThinkPHP的pathinfo模式,所以导致路径错误,出现了页面循环跳转的问题,于是就把nginx下载下来在本地亲自测试. 其实,要解决nginx不支持pathinfo的问题,有两个解决思路,一是不使用pathinfo模式,二是修改nginx的配置文件,使它支持pathinfo.为了使问题简单化,我选择

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • nginx部署访问vue-cli搭建的项目的方法

    从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的,而hash是不需要的,只不过地址会多了一个#/的后缀.使用hash模式构建的项目打包后,我只需要使用webstorm之类的软件打开访问就能成功了. 但是我用history模式构建的项目需要借助后台技术,我这里选用的是nginx反向代理来部署项目.具体做法如下: 1.创建后台服务器 对象 upstream mixVueServer{ server baidu.com;#这里是自己服务器域名 } 2

  • nginx下部署vue项目的方法步骤

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放的文件夹下 运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了: 然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf 点击进去然后找到一个ngi

  • nginx上部署react项目的实例方法

    测试项目:react-demo 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目) 如果需要,请安装项目环境,比如:node.js,yarn等 进入项目目录,执行npm run build,开始构建项目 构建成功之后,会生成一个dist文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了, 配置Nginx,Linux服务器是进入到:/etc/nginx/sites-enabled,然后以管理员身份,新建一个你的react项目的配置文件,比

随机推荐