Article directory
- Preface
- 1. Environment installation
- 2. Install cpolar intranet penetration
- 3. Intranet penetration
- 4. Fixed http address
- 5. Configure the second-level subdomain name
- 6. Create a test page
Foreword
As a simple and easy-to-use server operation and maintenance management panel, Pagoda Panel supports Linux/Windows systems. We can use it to configure LAMP/LNMP environments, websites, databases, FTP, etc. with one click, and easily manage servers through the Web.
In the following tutorial, we will demonstrate how to use the Pagoda Panel to quickly and easily build a local web site, and perform intranet penetration so that users who are not on the same LAN can also access the local web site without the need for a public IP or setting up a router.
1. Environment installation
To install the apache server, we click on the website in the pagoda panel, and then we will be prompted to install the apache server.
Choose quick installation
Then wait for the installation to be completed. When the installation is completed, a message list will appear on the left.
2. Install cpolar intranet penetration
- Open the Pagoda Terminal command window and use the cpolar installation script:
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
- token authentication
Log in to the cpolar official website, click Verification
on the left to view your authentication token, and then paste the token in the command line
cpolar authtoken xxxxxxx
- Add services to the system
sudo systemctl enable cpolar
- Start cpolar service
sudo systemctl start cpolar
- Open port 9200
Select security in the Pagoda panel. Then open port 9200
- Log in to the cpolar web UI management interface
Then access the LAN IP to port 9200 and the cpolar management interface will appear. Enter your cpolar email account to log in.
3. Intranet penetration
After logging in to the cpolar web UI management interface, we create an http tunnel pointing to port 80, because the default apache service is port 80
- Tunnel name: Customizable, be careful not to repeat it
- Protocol: http
- Local address: 80
- Port type: random domain name
- Region: China vip
Click Create
After the creation is successful, we open the online tunnel list and copy the created public network address.
Then we open the Pagoda panel, click on the website, select Add Site, paste the copied public network address into the parameter box of the domain name, and then click Submit
At this time we can see that the site was created successfully
Then we use the copied public network address, open the browser to access, and the welcome page appears to indicate success.
4. Fixed http address
Since the tunnel just created uses a random temporary address, the address will change within 24 hours. For long-term remote access, we next configure this public network address as fixed.
You need to upgrade to the basic package or above to support the configuration of second-level subdomain names.
Log in to the cpolar official website backend, click Reserve
on the left dashboard, find Reserve second-level subdomain name
, and reserve a second-level subdomain name for the http tunnel.
- Region: Select server region
- Name: Fill in the second-level subdomain name you want to reserve (can be customized)
- Description: Notes, which can be customized
This example reserves a second-level subdomain named mywebsitegame
. After the subdomain name is successfully reserved, we copy the subdomain name and then configure it into the tunnel.
5. Configure second-level subdomain names
Log in to the cpolar web ui management interface. Click Tunnel Management
– Tunnel List
on the left dashboard, find the tunnel that needs to be configured with a second-level subdomain name (in this case, the apache website tunnel), and click on the right Edit
Modify the tunnel information and configure the second-level subdomain name into the tunnel:
- Domain name type: select
Second-level subdomain name
instead - Sub Domain: Fill in the second-level subdomain name we just reserved (in this case,
mywebsitegame
)
After the modification is completed, click Update
After the tunnel is successfully updated, click Status
– Online Tunnel List
on the left dashboard. You can see that the public network address of the tunnel has been updated to a second-level subdomain name. Copy the public network address.
Then we open the Pagoda panel, find the site, and click Settings
Add a fixed public address domain name
Then delete the random address created before
Then we open the browser and use the fixed public network address to access. Above we have configured the site remote access.
6. Create a test page
Click the site root directory path and click directly
Create a new page named game.html
Then double-click the file to edit, copy the following code into it (Snake mini game), and then Ctrl + S to save
<!DOCTYPE html> <html> <head> <title>Snake</title> <meta charset="UTF-8"> <meta name="keywords" content="Snake"> <meta name="Description" content="This is a small game for beginners to learn"> <style type="text/css"> *{<!-- -->margin:0;} .map{<!-- -->margin:100px auto; height:600px; width:900px; background:#00D0FF; border:10px solid #AFAEB2; border-radius:8px; } </style> </head> <body> <div class="map"> <canvas id="canvas" height="600" width="900"> \t </canvas> </div> <script type="text/javascript"> //Get drawing tools /* var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");//Get context ctx.moveTo(0,0); ctx.lineTo(450,450);*/ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); /*ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(450,450); ctx.stroke(); */ var snake =[];//Define a snake and draw its body var snakeCount = 6;//Initialize the length of the snake var foodx =0; var foody =0; var togo =0; function drawtable()//Function to draw a map {<!-- --> for(var i=0;i<60;i + + )//Draw a vertical line {<!-- --> ctx.strokeStyle="black"; ctx.beginPath(); ctx.moveTo(15*i,0); ctx.lineTo(15*i,600); ctx.closePath(); ctx.stroke(); } for(var j=0;j<40;j + + )//Draw a horizontal line {<!-- --> ctx.strokeStyle="black"; ctx.beginPath(); ctx.moveTo(0,15*j); ctx.lineTo(900,15*j); ctx.closePath(); ctx.stroke(); } \t for(var k=0;k<snakeCount;k + + )//Draw the body of the snake {<!-- --> ctx.fillStyle="#000"; if (k==snakeCount-1) {<!-- --> ctx.fillStyle="red";//The color of the snake head is distinguished from the body } ctx.fillRect(snake[k].x,snake[k].y,15,15);//The first two numbers are the starting coordinates of the rectangle, and the last two numbers are the length and width of the rectangle. \t\t\t } //draw food ctx.fillStyle="black"; ctx.fillRect(foodx,foody,15,15); ctx.fill(); \t } function start()//Define the coordinates of the snake {<!-- --> //var snake =[];//Define a snake and draw its body //var snakeCount = 6;//Initialize the length of the snake \t\t for(var k=0;k<snakeCount;k + + ) {<!-- --> snake[k]={<!-- -->x:k*15,y:0}; \t\t\t } \t\t\t drawtable(); addfood();//Call the add food function in start } function addfood() {<!-- --> foodx = Math.floor(Math.random()*60)*15; //Randomly generate a number between 0-1 foody = Math.floor(Math.random()*40)*15; \t\t for (var k=0;k<snake;k + + ) {<!-- --> if (foodx==snake[k].x & amp; & amp;foody==sanke[k].y)//Prevent the generated random food from falling on the snake {<!-- --> addfood(); } } \t \t } \t\t function move() {<!-- --> switch (togo) {<!-- --> case 1: snake.push({<!-- -->x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//Go left case 2: snake.push({<!-- -->x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break; case 3: snake.push({<!-- -->x:snake[snakeCount-1].x + 15,y:snake[snakeCount-1].y}); break; case 4: snake.push({<!-- -->x:snake[snakeCount-1].x,y:snake[snakeCount-1].y + 15}); break; case 5: snake.push({<!-- -->x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break; case 6: snake.push({<!-- -->x:snake[snakeCount-1].x + 15,y:snake[snakeCount-1].y + 15}); break; default: snake.push({<!-- -->x:snake[snakeCount-1].x + 15,y:snake[snakeCount-1].y}); } snake.shift();//Delete the first element of the array ctx.clearRect(0,0,900,600);//Clear the canvas and redraw it isEat(); isDead(); drawtable(); } function keydown(e) {<!-- --> switch(e.keyCode) {<!-- --> case 37: togo=1; break; case 38: togo=2; break; case 39: togo=3; break; case 40: togo=4; break; case 65: togo=5; break; case 68: togo=6; break; } } function isEat()//The length increases by 1 after eating food {<!-- --> if(snake[snakeCount-1].x==foodx & amp; & amp;snake[snakeCount-1].y==foody) {<!-- --> addfood(); snakeCount + + ; snake.unshift({<!-- -->x:-15,y:-15}); } } //death function function isDead() {<!-- --> if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0) {<!-- --> window.location.reload(); } } document.onkeydown=function(e) {<!-- --> keydown(e); } window.onload = function()//Call function {<!-- --> start(); setInterval(move,150); drawtable(); \t \t } </script> </body> </html>
Then our browser uses the public network address to add this html file to access, and we can see the mini-game we deployed.