記事ディレクトリ
序文
ネット: 通常、インターネットを指します; ステーション: インターネット上の家として理解できます。インターネットを都市として考えてください。都市内のすべての家がサイトであり、リソースは家の中に保存されています。したがって、誰かがあなたの家の中にあるものにアクセスしたいと思ったらどうなるでしょうか?
実生活において、他人の家に行くには、まずその地域の何番地などの住所とその番号を知る必要がありますが、インターネットにもipという住所の概念があります。IPを介して、インターネット上のサイトを見つけることができます。ポートはこの家の入り口とみなすことができ、入り口によって見えるものは異なります。たとえば、門（ポート80のポート）からリビングルームに入る）書斎に。
次に、いくつかの簡単な手順を実行して、ubuntu 上に Web サイトの HTML ゲームを構築し、cpolar イントラネット ペネトレーションを使用してそれをパブリック ネットワークに公開します。これにより、パブリック ネットワーク ユーザーも通常どおりローカル Web サイトの小さなゲームにアクセスできるようになります。
1.地域環境サービス構築
apach2 は、ubuntu で実行されるコンテナ、つまり上記の家とみなすこともできるサービスです。このサービスは、対応するポートを介してこのマシン以外の他のコンピュータから独自の Web サイトのページにアクセスできるようにするのに役立ちます。
apach2をダウンロード
sudo apt install apache2 php -y
apache2をダウンロードしたら起動します
sudo service apache2 restart
次に、Ubuntu ブラウザを開いてhttp://localhostと入力すると、Apache のデフォルト ページが表示されます。これは、ローカル サイトが設定されていることを意味します。
Apache のデフォルト サーバーのメイン ディレクトリのパスを入力します。このディレクトリには、画像や HTML ページなど、他の人が参照したいリソースが含まれています。
cd /var/www/html
入力後、index.html ファイルを削除します Apache のデフォルトのページが目的のページではないので、好みのページに変更したいので削除します 以下のコマンドを実行します。
sudo rm -rf index.html
テスト効果を達成するために、HTML ページ ゲームをセットアップし、という名前のgame.htmlページを作成します。
sudo vim game.html
ボタンを押してi編集モードに入り、次のHTMLコードをコピーします（すべてコピー）
<!DOCTYPE html>
<html>
<head><h4>Take it Easy!Please playing Game</h4></head>
<body>
<div></div>
<!-- 4个board -->
<div id="board1" style="position: absolute; width:80px; height:10px; left:420px;
top:555px; background-color: cadetblue;"></div>
<div id="board2" style="position: absolute; width:80px; height:10px; left:520px;
top:555px; background-color: cadetblue;"></div>
<div id="board3" style="position: absolute; width:80px; height:10px; left:620px;
top:555px; background-color: cadetblue;"></div>
<div id="board4" style="position: absolute; width:80px; height:10px; left:720px;
top:555px; background-color: cadetblue;"></div>
<!-- 小球 -->
<div id="ball" class="circle" style="width:20px;
height:20px; background-color:crimson; border-radius: 50%; position:absolute;
left:600px; top:100px"></div>
<!-- 框 -->
<div id="box" style="border: 5px solid #555555; width:400px; height:550px; display=hide"></div>
<!-- 分数 过的board越多，分数越高 -->
<div id="score" style="width:200px; height:10px; position:absolute; left:900px;
font-family:'隶书'; font-size: 30px;">score: 0</div>
<!-- 游戏结束 -->
<div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
font-family:'隶书'; font-size: 30px; display: none;">Game Over</div>
<script>
// 设置box的样式
var box = document.getElementById("box");
box.style.position = "absolute";
box.style.left = "400px";
// 设置board的样式
var board1 = document.getElementById("board1");
var board2 = document.getElementById("board2");
var board3 = document.getElementById("board3");
var board4 = document.getElementById("board4");
// 声音
var shengyin = new Audio();
shengyin.src = "声音2.mp3";
shengyinFlag = 0; // 用来表示小球在第几块board上
// 键盘事件函数
var ball = document.getElementById("ball");
document.onkeydown = f;
function f(e){
var e = e || window.event;
switch(e.keyCode){
case 37:
// 按下左键，小球左移，但不要超过左边框
if(ball.offsetLeft>=box.offsetLeft + 10)
ball.style.left = ball.offsetLeft - 8 + "px";
break;
case 39:
// 按下右键，小球右移，但不要超过由边框
if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
ball.style.left = ball.offsetLeft + 8 + "px";
break;
case 32:
}
}
// 定义一个分数变量
var fenshu = 0;
// 定义一个函数，移动给定的一个board
function moveBoard(board)
{
var t1 = board.offsetTop;
if(t1<=0)
{
// 如果board移到最上面了，就随机换个水平位置，再移到最下面
t2 = Math.floor(Math.random() * (720- 420) + 420);
board.style.left = t2 + "px";
board.style.top = "555px";
fenshu += 1; //分数增加1
document.getElementById("score").innerHTML = "score " + fenshu;
}
//
else
board.style.top = board.offsetTop - 1 + "px";
}
// 定义小球的速度变量
var startSpeed = 1;
var ballSpeed =startSpeed;
// step函数是游戏界面的单位变化函数
function step()
{
// board直接上下隔得太近，就逐个移动，否则，同时移动
var t1 = Math.abs(board1.offsetTop - board2.offsetTop);
var t2 = Math.abs(board2.offsetTop - board3.offsetTop);
var t3 = Math.abs(board3.offsetTop - board4.offsetTop);
// 定义一个board之间的间隔距离
var t4 = 140;
if(t1<t4)
{
moveBoard(board1);
}
else if(t2<t4)
{
moveBoard(board1);
moveBoard(board2);
}
else if(t3<t4)
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
}
else
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
moveBoard(board4);
}
// 定义小球的垂直移动规则，1、向下匀加速运动，2、如果碰到board就被board持续抬上去，
// 直到按左右键离开了该board
// 如果小球的纵坐标等于某个board的纵坐标，就被抬起
var t5 = Math.abs(ball.offsetTop - board1.offsetTop);
var t6 = Math.abs(ball.offsetTop - board2.offsetTop);
var t7 = Math.abs(ball.offsetTop - board3.offsetTop);
var t8 = Math.abs(ball.offsetTop - board4.offsetTop);
if(t5<=ball.offsetHeight && t5>0 && ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
{
ball.style.top = board1.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 1)
{
shengyin.play();
shengyinFlag = 1;
}
}
else if(t6<=ball.offsetHeight && t6>0 && ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
{
ball.style.top = board2.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 2)
{
shengyin.play();
shengyinFlag = 2;
}
}
else if(t7<=ball.offsetHeight && t7>0 && ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
{
ball.style.top = board3.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 3)
{
shengyin.play();
shengyinFlag = 3;
}
}
else if(t8<=ball.offsetHeight && t8>0 && ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
{
ball.style.top = board4.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 4)
{
shengyin.play();
shengyinFlag = 4;
}
}
else
{
ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
ball.style.top = ball.offsetTop + ballSpeed + "px";
}
// ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
// ball.style.top = ball.offsetTop + ballSpeed + "px";
// 如果小球跑出来box，就结束游戏
if(ball.offsetTop==0 || ball.offsetTop>=box.offsetTop+box.offsetHeight)
{
clearInterval(gameover);
ball.style.display = 'none';
board1.style.display = 'none';
board2.style.display = 'none';
board3.style.display = 'none';
board4.style.display = 'none';
var gg = document.getElementById("gg"); //显示游戏结束
gg.style.display = 'block';
}
}
var gameover = setInterval("step();", 8);
</script>
</body>
</html>
コピー後、
Escキーを押して編集を終了し、コロンを入力して:wq保存して終了します。
2. LANテストアクセス
ブラウザにhttp://localhost/game.html と入力すると、HTML ページ上に小さなゲームサイトが表示されます 静的サイトがデプロイされているため、サービスを再起動する必要はありません。
3. イントラネットの浸透
現在、このサイトはローカルでのみアクセスできるため、誰でもアクセスできるようにするには、このローカル ベース サイトをパブリック ネットワークに公開する必要があります。ここでは、cpolar 内部ネットワーク侵入ツールを使用してこれを実現します。http/https/tcp プロトコルをサポートし、パブリック ネットワーク IP を必要とせず、ルーターをセットアップする必要もありません。ローカル サイトをパブリック ネットワークに簡単に公開できます。誰もが訪れることができるように。
3.1 ubuntu ローカル インストール cpolar イントラネットの浸透
cpolar公式サイト： https: //www.cpolar.com/
- cpolar はワンクリック自動インストール スクリプトをサポートしています
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
- トークン認証
cpolar 公式 Web サイトの背景にログインし、左側の検証をクリックして自分の認証トークンを表示し、コマンド ラインにトークンを貼り付けます。
cpolar authtoken xxxxxxx
- 簡単な侵入テスト。侵入は成功し、パブリック ネットワーク アドレスが正常に生成されます。ctrl+c を押して終了します。
cpolar http 8080
- システムにサービスを追加し、起動時に自動的に開始するように cpolar を構成します。
sudo systemctl enable cpolar
- cpolarサービスを開始する
sudo systemctl start cpolar
- サービスのステータスを確認します。正常に表示されている場合は、
active起動が成功し、通常のオンライン状態であることを意味します。
sudo systemctl status cpolar
3.2 トンネルの作成
cpolar が正常にインストールされたら、ブラウザーでローカル領域にアクセスし9200端口、cpolar Web UI 管理インターフェイスにログインします。
左側のダッシュボードで [トンネル管理] - [トンネルの作成] をクリックします。
- トンネル名: カスタマイズ可能、重複しないように注意してください
- プロトコル: http
- ローカルアドレス: 80
- ポートタイプ: ランダムなドメイン名
- 地域: 中国VIP
クリック创建
トンネルが正常に作成されたら、左側のステータス (オンライン トンネル リスト) をクリックすると、作成したばかりのトンネルが対応するパブリック ネットワーク アドレスを生成し、コピーしてアクセスをテストしたことがわかります。
3.3 パブリック ネットワーク アクセスのテスト
ブラウザを開いて、先ほどコピーしたパブリック ネットワーク アドレスにアクセスします。後でパス /game.html を追加する必要があることに注意してください。そうすれば、ゲーム インターフェイスが正常に表示されます。
ゲームコントロールの使用: キーボードの上下左右のキー
4. 固定の第 2 レベルのサブドメイン名を構成する
上記で作成されたトンネルはランダムなドメイン名を選択するため、生成されるパブリック ネットワーク アドレスは 24 時間以内にランダムに変更され、長期間のアクセスが必要なユーザーにとっては不便です。ただし、アクセス用に固定の第 2 レベルのサブドメイン名を構成でき、アドレスを変更してもランダムに変更されることはありません。
注: 固定の第 2 レベルのサブドメイン名の設定機能をサポートするには、基本バージョン パッケージ以降にアップグレードする必要があります。
4.1 第 2 レベルのサブドメインを予約する
cpolar 公式 Web サイトの背景にログインし、左側の [予約済み] をクリックして、予約済みの第 2 レベルのサブドメイン名を見つけます。
- 地域: 中国 VIP を選択
- 第 2 レベルのドメイン名: カスタマイズ可能
- 説明: 備考。カスタマイズ可能
クリック保留
サブドメイン名が正常に予約されたことを示すプロンプトが表示され、予約された第 2 レベルのサブドメイン名をコピーします
4.2 第 2 レベルのサブドメイン名の構成
ローカル ポート 9200 にアクセスして cpolar Web UI 管理インターフェイスにログインし、左側のダッシュボードのトンネル管理 - トンネル リストをクリックし、設定するトンネルを見つけて、右側の [編集] をクリックします。
トンネル情報を変更し、正常に予約された第 2 レベルのサブドメイン名をトンネルに構成します。
- ドメイン名のタイプ: 第 2 レベルのサブドメイン名を選択します
- サブドメイン: 予約済みの第 2 レベルのサブドメイン名を入力します。この場合は test01
クリック更新
トンネルが正常に更新されたことを示すメッセージが表示されます。左側のダッシュボードのステータス - オンライン トンネル リストをクリックすると、パブリック ネットワーク アドレスが、正常に予約された第 2 レベルのサブドメイン名に更新されたことがわかり、それをコピーします。
4.3 パブリック ネットワークの固定第 2 レベル サブドメインへのテスト アクセス
任意のブラウザを使用し、パブリック ネットワークの固定サブドメイン名 +/game.html を入力すると、作成したゲームのサイトが表示されます。
cpolarpolecloudの記事より転載: UbuntuでWebサイトを構築し、パブリックネットワークに公開してアクセスする