A must-have for developers: It is recommended to use an idle iPad Pro as a programming tool and use VS Code to write code

foreword

With the popularity of tablet PCs, most people's living habits and life scenes are inseparable from the use of tablet PCs, such as watching dramas, watching short videos, playing mainstream games, etc., but these are only entertainment scenes. How about integrating it into work or production scenarios, such as editing documents, making work forms, and writing code?

So after buying the ipad, in order to prevent "productivity before buying, iQiyi after buying". We can build a code server on linux, and then use an ipad to remotely access the code server through a browser or an app. Use the resources of the server to run the code, and the front end of the ipad only needs to be responsible for the code and operation, making the ipad a perfect mobile development tool! !

Moreover, in order to achieve remote mobile development anytime, anywhere, we use cpolar intranet penetration to break through the limitations of the local area network, and realize that the ipad can also be used to write code development in the public network environment! !

1. Local environment configuration

Prepare a virtual machine, either Ubuntu or centos, here we take the VMware Ubuntu system as an example

Download code server service

Access in browser: https://github.com/coder/code-server , copy and download command

Open the ubuntu command line to execute

curl -fsSL https://code-server.dev/install.sh | sh

It appears that you need to enter the login account password of ubuntu, just enter the password, and then wait for the installation to complete

The following information indicates that the installation was successful

Then enter the following command to set the code-server login password

export PASSWORD=”000000”

Check the IP address for LAN access

ifconfig

After setting the password, start the code-server service and enter the following command:

code-server --host= “0.0.0.0”

The address and port number information appears to indicate success

Then open the browser and access http://192.168.30.128:8080/ through the LAN , it will appear welcone code-serverto indicate success, enter the password we set, and log in.

2. Intranet penetration

Then we use cpolar to penetrate the local code-server service, so that it can be accessed remotely and write code anytime and anywhere. cpolar supports http/https/tcp protocols, does not limit traffic, is easy to operate, and does not require a public network IP or router.

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

2.1 Install cpolar intranet penetration (support one-click automatic installation script)

• cpolar installation (domestic use)

curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash

• Or cpolar short link installation method: (for foreign use)

curl -sL https://git.io/cpolar | sudo bash

• View version number

cpolar version

• token authentication

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

cpolar authtoken xxxxxxx

• Simple Penetration Test

cpolar http 8080

Press ctrl+c to exit

• Add a service to the system

sudo systemctl enable cpolar

• Start the cpolar service

sudo systemctl start cpolar

• View service status

sudo systemctl status cpolar

If it is normally displayed as active, it means that the service is in the normal online startup state

2.2 Create an HTTP tunnel

After locally installing cpolar intranet penetration in the ubuntu system, visit the local port 9200 on the ubuntu browser, and open the cpolar web ui interface: http://127.0.0.1:9200 .

Click Tunnel Management on the left dashboard - Create Tunnel. Since port 8080 is configured in code-server, we need to create an http tunnel pointing to port 8080:

• Tunnel name: customizable, be careful not to repeat
• Protocol: http protocol
• Local address: 8080
• Domain Type: Choose a random domain name
• Region: Select China VIP

click创建

After creation, click on the status on the left - online tunnel list, view the public network address, and copy it

3. Test remote access

Open the ipad browser and enter the public network address you just copied to access. After accessing, enter the previously set password, and the vscode interface will appear to indicate success.

4. Configure a fixed second-level subdomain name

4.1 Reserved second-level subdomains

Since the above tunnel created by using cpolar uses a random temporary public network address, the address will change within 24 hours, which is not conducive to long-term remote access. Therefore, we can configure a second-level subdomain name for it, which is a fixed address and will not change randomly [ps: cpolar.cn has been filed]

It should be noted that to configure a fixed second-level subdomain name, you need to upgrade cpolar to the basic package or above.

Log in to the cpolar official website, click Reserve on the left, choose 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

• Region: Select China VIP
• Second-level domain name: can be customized
• Description: Remarks, which can be customized

4.2 Configure the second-level subdomain name

Access the local port 9200, open the cpolar web ui interface, click the tunnel management on the left - tunnel list, find the vscode tunnel, click edit on the right

Modify the tunnel information:

• Change the domain name type to select a second-level subdomain name
• subdomain: Fill in the second-level subdomain name that has just been successfully reserved

click更新

After the tunnel is successfully updated, click on the status on the left - online tunnel list, view the public network address, you can see that the address has become a second-level domain name, copy it

5. Test remote access using a fixed second-level subdomain name

Then we open the ipad browser again, access the fixed secondary subdomain address that has just been successfully configured, and the vscode interface appears to indicate success, and you can write code happily.

6. iPad remote vscode via software

Next, we use the servediter for code-server software to realize ipad remote access to vscode

6.1 Create a TCP tunnel

First, you need to create a TCP tunnel, pointing to port 22 of our server. servediter for code-serverThis software needs to connect to the server. Open a browser on ubuntu to access the local port 9200, log in to the cpolar web ui interface, and click Tunnel Management on the left - Create Tunnel

• Tunnel name: customizable, be careful not to repeat
• Protocol: tcp protocol
• Local address: 22
• Domain name type: choose a random temporary TCP port
• Region: Select China VIP

click创建

After the tunnel is successfully created, click on the status on the left - online tunnel list, and copy the generated public network address.

7. ipad remote vscode

On the ipad, click to open the appstore and download the softwareservediter for code-server

After the download is successful, click to open. Since the software is paid, you can choose to buy it freely. Here, choose a free trial and choose the last free

Enter relevant information

Parameter introduction:

• code-server URL: Fill in the successfully configured http public network address [the address accessed by the ipad browser]
• Instance password: password configured by code-server
• Host: fill in the public network address of the 22 tunnel we created earlier
• Username: This fills in the username of the ubuntu system
• Port: The default here is no need to modify
• Authentication: This fills in the password corresponding to the ubuntu system user name

After entering the information, click save in the upper right corner and it will automatically connect, and the vscode interface will appear to indicate that the connection is successful.

8. Configure a fixed TCP port address

Since the ssh port 22 tunnel we created earlier selected a random temporary address, the address will change within 24 hours. In order to make the use of vscode connection in our ipad more smooth, we need to fix the public network address of ssh.

Note that the cpolar package needs to be upgraded to a professional package or above.

8.1 Reserve a fixed TCP address

Log in to the background of the cpolar official website , click on the reservation on the left, and find the reserved TCP address:

• Region: Select China VIP
• Description: Remarks, which can be customized

click保留

The fixed TCP address is reserved successfully, the system generates the corresponding public network address + fixed port number, and copies it

8.2 Configure fixed TCP port address

Visit http://127.0.0.1:9200/ with the browser to log in to the cpolar web UI management interface, click the tunnel management on the left dashboard - tunnel list, find the codeserver tunnel, and click edit on the right

Modify the tunnel information and configure a fixed TCP port address:

• Port Type: Select Fixed TCP Port instead
• Reserved TCP address: Fill in the fixed TCP port address that has just been successfully reserved

click更新

It prompts that the tunnel update is successful, click the status on the left dashboard - online tunnel list, you can see that the public network address of the tunnel just modified has been updated to a fixed TCP port address, copy it.

9. Use fixed TCP address to remote vscode

On the ipad, open the servediter for code-server software, modify the host parameter, and change it to the fixed TCP port address we just configured successfully.

Click on ithe logo in the upper left corner

Select self Host Server

Change the Host value to the tcp address we just reserved on the official website

After changing, click save in the upper right corner. After clicking, it will automatically connect, and the vscde interface will appear to indicate success. At this point, the tutorial is over. Use the ipad to start happy programming! The public network address will no longer change randomly.