Linux service uses the Pagoda panel to build a website and publish public network access – intranet penetration

Article directory

  • foreword
  • 1. Environment installation
  • 2. Install cpolar intranet penetration
  • 3. Intranet penetration
  • 4. Fixed http address
  • 5. Configure the second-level subdomain
  • 6. Create a test page

Reprinted from the article of remote intranet penetration: Linux uses the pagoda panel to build a website, and intranet penetration to achieve public network access

Foreword

As a simple and easy-to-use server operation and maintenance management panel, the Pagoda panel supports Linux/Windows systems. We can use it to configure the LAMP/LNMP environment, website, database, FTP, etc. with one click, and easily manage the server through the Web terminal.

In the following tutorial, we will demonstrate how to use the pagoda panel to quickly and easily build a local web site, and do intranet penetration, so that users who are not in the same LAN can also access the local web site without public IP or router settings.

1. Environment installation

Install the apache server, click on the website in the pagoda panel, and then you will be prompted to install the apache server.

image-20230307143843485

choose fast installation

image-20230307155129355

Then wait for the installation to complete, the message list on the left will prompt when the installation is complete

image-20230307155221216

2. Install cpolar intranet penetration

首页

  • Open the pagoda terminal command window and use cpolar to install the script:
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash

image-20230303183721806

  • token authentication

Log in to the cpolar official website, click Verify on the left to view your authentication token, and then paste the token in the command line

cpolar authtoken xxxxxxx

20230111103532

  • Add a service to the system
sudo systemctl enable cpolar
  • Start the cpolar service
sudo systemctl start cpolar
  • Open port 9200

Select security in the pagoda panel. Then open port 9200

image-20230303184430176

  • Log in to the cpolar web UI management interface

Then the LAN ip accesses port 9200, and the cpolar management interface will appear, enter the cpolar email account to log in

image-20230303184618711

3. Intranet penetration

After logging in to the cpolar web UI management interface, we create an http tunnel pointing to port 80, because the apache service defaults to port 80

  • Tunnel name: customizable, be careful not to repeat
  • protocol: http
  • Local address: 80
  • Port type: random domain name
  • Region: China VIP

Click Create

image-20230307161358154

After the creation is successful, we open the online tunnel list to copy the created public network address

image-20230307161716775

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 click Submit

image-20230307162110990

At this point we can see that the site was successfully created

image-20230307162248903

Then we use the copied public network address, open the browser to access, and the welcome page appears to indicate success

image-20230307163357047

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 will configure this public network address as fixed next.

You need to upgrade to the basic package or above to support the configuration of second-level subdomains

Log in to the background of the cpolar official website, click Reserved on the left dashboard, find Reserve the 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 (customizable)
  • Description: Remarks, which can be customized

image-20230307164936590

In this example, a second-level subdomain named mywebsitegame is reserved. After the subdomain name is successfully reserved, we copy the subdomain name, and then we need to configure it in the tunnel.

image-20230307165346945

5. Configure the second-level subdomain

Log in to the cpolar web ui management interface. Click Tunnel Management on the left dashboard–Tunnel List, 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

image-20230307165440111

Modify the tunnel information and configure the second-level subdomain name into the tunnel:

  • Domain name type: choose secondary subdomain name instead
  • Sub Domain: Fill in the second-level subdomain we just reserved (in this case mywebsitegame)

After modification, click Update

image-20230307165524932

After the tunnel is successfully updated, click Status on the left dashboard–Online Tunnel List, and you can see the public network address of the tunnel, which has been updated to a second-level subdomain name. Copy the public network address.

image-20230307165845253

Then we open the pagoda panel, find the site, and click Settings

image-20230307170712990

Add a domain name of our fixed public network address

image-20230307170900973

Then delete the previously created random address

image-20230307170948787

Then we open the browser and use a fixed public network address to access. We have configured remote access to the site above.

image-20230307172031135

6. Create a test page

Click the site root directory path, click directly

image-20230307172438126

Create a new page named game.html

image-20230307172627027

Then double-click the file to edit, copy the following code into it (snake game), and then press Ctrl + S to save

<!DOCTYPE html>
<html>
<head>
<title>Eating Snake</title>
<meta charset="UTF-8">
<meta name="keywords" content="Greedy 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 the drawing tool
/*
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, draw the snake's body
    var snakeCount = 6;//Initialize the length of the snake
var foodx = 0;
var foody = 0;
    var togo = 0;
    function drawtable()//The function of drawing the map
    {<!-- -->
 
 
    for(var i=0;i<60;i + + )//draw vertical lines
    {<!-- -->
    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 the 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, draw the snake's 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 function of adding food 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 (to go)
{<!-- -->
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
   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()//Add 1 to the length 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>

image-20230307172848766
Then our browser uses the public network address to add this html file to access, and we can see the mini game we deployed.

image-20230307173606348