[VS Code Development] Use Live Server to build MENJA games and publish them to the public network for remote access

Preface

In this tutorial, we will use VS Code to remotely develop the MENJA mini-game, and publish it to the public network through the cpolar intranet, sharing it with friends wherever they are to experience the fun of the game developed by you.

Without further ado, let me teach you how to use VS Code to write a MENJA slicing game. Here we use VS Code and combine it with the Live Server plug-in for debugging. Live Server can achieve one-click installation, automatic refresh, and set up a local server. environment.

1. Write MENJA mini-game

The source code address of this article’s mini-game:https://github.com/ADAMxWANG/menja

Download the ZIP compressed package to your local computer:

image-20231205171902463

currentlyVS Codeexhibition in searchLive Server, Anso

image-20231205104829266

Right-clickindex.html file, click Open with Live Server to pop up the web interface, the port is 5500

image-20231205162407683

image-20231205105336821

Next, you can debug under the menja folder, and use Live Server to debug at any time and view the developed web page in real time.

image-20231205162747769

Next, we will publish the created game webpage to the public network and share it with friends for access.

2. Install cpolar intranet penetration

To share the game with friends, first we need to install the cpolar intranet penetration tool on Linux, and forward the http public network address mapped to the local port through cpolar. We can easily achieve remote access without having to register a domain name ourselves to purchase a cloud server. Below Here are the steps to install cpolar:

cpolar official website address: https://www.cpolar.com

  • Use one-click script installation command
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • Add services to the system
sudo systemctl enable cpolar
  • Start cpolar service
sudo systemctl start cpolar

After cpolar is installed successfully, access the 9200 port of Linux on the external browser: [http://LAN ip:9200]. Log in using the cpolar account. After logging in, you can see the cpolar web configuration interface, which is completed in the web management interface. Just configure it.

image-20231016143741228

3. Configure the MENJA mini game public network access address

Click Tunnel Management - Create Tunnel on the left dashboard to create a cpolar public network address tunnel for the MENJA mini game!

  • Tunnel name: The name can be customized. Be careful not to duplicate the existing tunnel name.
  • Protocol: Select http
  • Local address: 5500 (port for local access)
  • Domain name type: Choose a random domain name for free
  • Region: Select China Top

Click创建

image-20231205162913957

After the tunnel is successfully created, click Status on the left - Online Tunnel List to view the generated public network access address. There are two access methods, namely http and https.

image-20231205163034816

4. Implement public network access to MENJA mini-games

Use the cpolar https public network address above and access it in the browser of any device. You can successfully see the mini-game interface. In this way, a public network address that can be accessed remotely is created. Using the public network domain name of cpolar, no need If you purchase a cloud server yourself, you can publish it to the public network for remote access anytime and anywhere. (Tips: Log in with a new domain name, you may need to log in again)

image-20231205163131214

5. Fixed MENJA mini-game public network address

Since the tunnel created using cpolar above uses a random public network address, it will change randomly within 24 hours, which is not conducive to long-term remote access. I usually use a fixed second-level subdomain name, because I hope that when I send the game URL to a friend to play, I can directly access it using a simple and easy-to-remember fixed public network address. I don’t need to change the address every day, so I can always enjoy the game happily.

The fixed second-level subdomain name looks like this (for example: MENJA.cpolar.cn). This address is a fixed address and will not change randomly.

Note that you need to upgrade the cpolar package to a basic package or above, and the bandwidth corresponding to each package is different. [cpolar.cn has been registered]

Log in to the cpolar official website, click Reserve on the left, select to reserve the second-level subdomain name, set a second-level subdomain name, click Reserve, and copy the reserved second-level subdomain name after the reservation is successful. Level subdomain name.

5f9c95aa2f400d49a0515b73da833d7

After the reservation is successful, copy the name of the second-level subdomain name that was successfully reserved.

f22eed666d7c9f88db05f89f915958f

Return to the cpolar web UI management interface, click Tunnel Management - Tunnel List on the left dashboard, find the tunnel you want to configure, and click Edit on the right

eb372d40f1adb6a6dbb85ea47a2a360

Modify the tunnel information and configure the successfully reserved second-level subdomain name into the tunnel.

  • Domain name type: Select a second-level subdomain name
  • Sub Domain: Fill in the successfully reserved second-level subdomain name

Click更新(Note, click once to update, no need to submit again)

image-20231205163504701

After the update is completed, open the online tunnel list. At this time, you can see that the public network address has changed and the address name has become a domain name with a fixed second-level subdomain name.

image-20231205163654863

Finally, we use the fixed public network address to access the game webpage, and we can see that the access is successful. In this way, a fixed and permanent public network address is set.

Now we can share this web page or game page written by VS Code with the fixed address generated by cpolar to your friends for remote gaming anytime and anywhere~

Guess you like

Origin blog.csdn.net/qq_57761637/article/details/134924706