How to use Synology virtual machine to deploy local web page files to achieve remote access over the public network?

Preface

My classmate Lao Zhang travels very frequently due to professional needs. When he finally found a girlfriend, he had to be separated from the two places for a long time. He was faced with long business trips and jet lag. Whenever the night is quiet, they are itching and hoping to find a special way to maintain their relationship, so that love is not bound by geographical distance, and to commemorate the passionate moments when they rush for love.

Free stock photo of couple, whereabouts, people

One night, Lao Zhang made a webpage to commemorate their love story, but he didn't know how to let his girlfriend see this webpage anytime and anywhere. Lao Zhang was very anxious and asked me how to let his girlfriend see it as soon as possible. to this site?

The solution I gave him was:

Use a Synology virtual machine to deploy a local web page file, and then use the intranet penetration tool to publish it to the public network. Not only can his girlfriend see it, but he can also post it to Moments to show his affection and make others sad! !

image-20230907113509100

How to install Synology virtual machine with one click for free, please refer to:

How can school students use Heiqunhui virtual machines and intranet penetration to achieve public network access to massive resources? (Exclusively for beginners) - cpolar JiDianCloud

After installing the Synology virtual machine, follow the steps below to quickly publish a local love web page!

1. Install the web page running environment

Following the principle from easy to difficult, we first try to build a simple static web page on Synology NAS. We are familiar with cpolar's process of creating a data tunnel and the principle of publishing web pages, and then build a deeper dynamic web page. To build a static web page, you must first install the necessary programs to run the web page in the package center of the Synology system. These programs include the PHP series and the web station package. Here we choose to install the php7.4 version of the php series (this is also necessary for later building dynamic web pages, so install it first).

1.1 Install php

Open the package center of Synology system, enter php in the search box, find php7.4, and click "Install Package" below the icon to install it.

20221118140353

After the installation of php7.4 is completed, it will be displayed as "Installed".

20221118140402

1.2 Install webstation

Following the same steps, we search and install the web station package.

20221118140410

20221118140417

2. Download the web page source code file

2.1 Visit the website address and download the compressed package

Before setting up the web station, we first find the source code of a simple web page for our web page display. The source code I chose here is an open source web page (thanks to the producer for sharing the open source). The download address is "https://gitee.com/selfeasy/love". For convenience of operation, it can be downloaded in zip format.

20221118140423

2.2 Unzip and upload to Qunhui NAS

Then unzip it on your local computer. After decompression, you can drag the web page folder directly to the Synology system. At this time, we can first store it in the web folder.

20221118140430

20221118140437

3. Configure webstation

After completing the move of the web page folder, we can simply set up the web station to generate an environment for local web pages to run.

3.1 Configure web service

Click the "Open" button below the web station diagram to enter the main interface of the web station. We click the "Web Service" item on the left, click "Add" at the top of the page, and select "Native Scripting Language" in the pop-up selection box. Website" to generate a web page running container.

image-20230821111725410

After completing the selection of web content, we need to select php. If apa is installed correctly, the php7.4 we installed will appear in the PHP field. Just click to select; then click Next

image-20230821111813841

Fill inweb service name andoverview, in < /span>Browse SelectDocument Root

image-20230821111940738

Select the static web page folder you just uploaded and click Select

image-20230821112017006

You can choose Nginx or apache as the backend server; confirm the configuration information again and click Next

image-20230821112033626

Confirm the information and click Add

image-20230821112053376

At this point we see the loveweb-test we just created in the web service menu bar Serves the local web page for the name. It means that we have successfully configured the web service.

image-20230821112159083

3.2 Configuring the web portal

Next, let’s configureNetwork Portal, select Network Portal in the left menu bar Click Add

image-20230821112224565

Select Web Service Portal

image-20230821112248576

After clicking, we will enter the settings page of the local website. On this page, we need to set the parameters one by one.

Select the newly createdweb service. Our test name is: loveweb -test

image-20230821112331864

Next item, it’s time to choose Portal type:

The first is the setting of the portal type. We can choose whether to access the web page based on the host name or the port number (that is, the generated local address is identified by an English string or a number)

If we choose to open a web page based on the host name, the configuration is as follows:

image-20230821154844165

But what we recommend more is to choosebased on port, because next we need to further learn to configure more complex websites, and we need to continue to When entering the website address during the debugging process, it is obvious that based on the port number (two digits) it is more convenient to enter and less prone to errors.

image-20230821112350894

  • Select based on port

    • Port: Check HTTP and fill in the port number 99 in the space after it (we will most likely not use the https port, but we also need to postpone the port number, otherwise it will prompt a port setting error)

It should be noted that only one of port-based and hostname-based can take effect, and both cannot take effect at the same time, and:

  • The port based URL is http://LANIP/hostname
  • The port-based URL is http://LAN IP:port number

Tick HTTP and fill in the port 99

image-20230821150416297

After clickApply, we are in the Web Portal interface Discover the user-defined portal we created and click on the corresponding link.

image-20230821150449310

4. LAN access to static web pages is configured successfully

At this point, we successfully opened the static page with local port 99 in the LAN.

image-20230821150512741

As you can see, our web page template can be opened normally, which means that the static web page on Synology NAS is successfully configured. Since the configuration details of the web station are many, we need to be more careful when configuring to avoid configuration errors that will cause the web page to be inaccessible.

5. Use cpolar to publish static web pages to enable public network access to web pages deployed locally on the NAS.

5.1 Install cpolar

The software installation program of Synology system is very different from that of Windows. At the same time, Synology system has modified the native Linux system. As a result, if Synology wants to install cpolar, it can only install the package manually. First, we download the Synology system package from cpolar.

cpolar Synology Suite download address:https://www.cpolar.com/synology-cpolar-suite

20221118135537

Then, in the "Package Center" of the Synology system, select "Manual Installation", and on the pop-up file selection page, find the location where the cpolar package is stored, and click "Next" to install it. Before the installation starts, the Synology system will pop up a prompt. We can ignore it and select "Agree" to install.

20221118135543

20221118135548

20221118135556

After clicking to agree, Qunhui system will confirm the installation information, and we continue to click "Finish". Just wait a short time for cpolar to be installed. At this time, return to the Package Center homepage and you will see that cpolar has been added to the "Installed" list.

20221118135602

20221118135608

At this point we click cpolar to enter the cpolar software information page. Here, we can find the URL to access the cpolar client (the cpolar client uses the Web-UI interface, so it is the URL address)

20221118135614

20221118135619

In the newly opened Web page, we can see the local address of the cpolar client and the login interface of the cpolar client. If you do not have a cpolar account, you can quickly and easily obtain a cpolar account through the "Free Registration" link at the bottom of the page.

From the above introduction, it is easy to see that installing cpolar on a Synology system is not complicated. In just a few simple steps, you can connect the Synology NAS on the intranet to the public Internet through the powerful data tunnel function of cpolar.

5.2 Use cpolar to publish local pages to the public network

In the first few chapters, we will introduce to you how to use cpolar to publish this freshly baked web page to the public Internet.

In the previous article, we used web station to create a simple static web page in the Synology system, and tested it in the LAN, and the web page could be displayed normally. Next, we can use cpolar to establish a data tunnel and publish this web page to the public Internet. Now, let's see how to do it.

Before using cpolar to create a data tunnel, we need to review the output port of the local web page. In the previous settings, we set the http and https ports to 81 and 82 respectively (setting them to the same port will cause port conflicts, so they can only be set separately ). In the settings of cpolar, we can directly use port 81 to establish a data tunnel.

Open the cpolar client in the Synology system

20221118140628

Select the "Create Tunnel" page under "Tunnel Management". The same as the settings for remote access to the intranet Synology NAS, we first need to name this tunnel. Here we use the web page theme love as the tunnel name; then select the "http" protocol for "Protocol"; "Local Address" represents is the port number of the web page, fill in "99" here; for "Domain Name Type" we first select "Random Domain Name" to create a temporary tunnel for testing; the last "Region" is selected based on the actual situation, here we choose China VIP.

image-20230823164528372

After all settings are completed, you can click the "Create" button at the bottom of the page to create a temporary data tunnel and test the local web page to confirm that it can be accessed normally.

Then we click "Online Tunnel List" under the "Status" item, find the temporary public network address generated by the cpolar client, and enter the address in the browser to access.

image-20230823164647336

image-20230823164843527

After testing, the data tunnel established by cpolar has successfully pointed to the local webpage of Synology NAS, and we can also access the webpage content normally, which means that there are no problems with our configurations. However, the data tunnel at this time is still in a temporary link state, and the public network address will be updated every 24 hours. In order to ensure long-term stable access to our website, we need to further set up the data tunnel. In this part, we will In the next article, I will introduce it to you in detail.

5.3 Configure a second-level subdomain name for the local web page and publish it on the public network

In the previous two introductions, we used Synology system packages (mainly web station and php7.4) and open source templates to create a simple web page in the local Synology NAS, and used the temporary data tunnel established by cpolar. Publish it to the public internet to test that everything we set up is correct. The results show that there is no problem with the settings we made, so we can fix this data tunnel so that our website links can exist stably. Now, let's get started.

To establish a stable data tunnel, you need to set up the entrance and exit of the tunnel. The exit of the data tunnel is obvious, which is the local web page of Synology NAS (can be set in the cpolar client), and the entrance of the data tunnel, It is the public network address generated by cpolar cloud. Therefore, we first log in to the cpolar official website. To access the cpolar official website, we can access it through the "cpolar" official website button on the left side of the client page, or enter "https://www.cpolar.com" in the browser.

image-20230823170235966

After entering the cpolar official website and logging in to our personal account, we click on the "Reserve" item on the left side of the page and find the "Reserve Second-Level Subdomain Name" field. In this field, we need to define three pieces of information. The first is the "Region". This column is the same as the cpolar client. Just select the actual region of use (here we fill in China VIP); then there is the "Name" field. The information filled in this field will eventually be displayed on the public network. address, so you can choose clear content (we fill in the web page content lovetest, here if you click Reserve it will prompt that this domain name has been registered by other users, you can change it according to your personal needs, such as LoveTest, etc.); finally The description of this data tunnel can also be regarded as annotation, which facilitates us to distinguish the content pointed by different data tunnels.

After filling in all the information, you can click the "Save" button on the right side of the field to save this web page data tunnel.

After setting up the data tunnel in the cpolar cloud, we return to the cpolar client of Synology NAS, find the previously established temporary data tunnel in the "Tunnel List" under the "Tunnel Management" item, click the "Edit Button" to open the tunnel editing page .

image-20230823170318590

On this page, we need to change the Synology local exit information of the data tunnel based on the data tunnel entrance established on the cpolar cloud. First, change the "random domain name" to the "second-level subdomain name"; then fill in the second-level domain name in the "Sub Domain" below, in this example it is lovetest; finally click "Update" at the bottom of the page to save the information we have made Change.

Then we go to the "Online Tunnel List" page under the "Status" item to check whether the public network address information has been changed successfully.

image-20230823170537911

After confirming that the public network address has been changed successfully, we can use this link to try to access the webpage on the Synology NAS. As long as it can be displayed correctly, it means that our webpage has obtained a fixed public network address and can be accessed stably by visitors for a long time.

image-20230823170756626

At this point, we have successfully created a simple web page on the Synology system and published it to the public Internet using cpolar, so that it can be easily accessed by public network visitors.

Lao Zhang's love website has become a bridge for their love. No matter how far apart they are, they can access this website anytime, anywhere, change the content, and leave traces of their love. This website witnessed their romantic moments and recorded their passionate moments of love. Whether you are a striver, a lover, or just want to commemorate your love in a special way, this tutorial will help you realize this wish and create your own love website in a simple and fun way. May your love story be like that of Lao Zhang and his girlfriend, spanning time and space, blooming on the web, leaving behind beautiful memories and affectionate moments.

Guess you like

Origin blog.csdn.net/qq_25749749/article/details/134379287