How to turn IPad Pro into your productivity tool? Use Vscode to write code and develop on IPad

Preface

With the popularity of tablet computers, most people's living habits and life scenes are inseparable from the use of tablet computers, such as watching TV series, watching short videos, playing mainstream games, etc. However, these are only entertainment scenes. If you want to realize the use of tablet computers, How about integrating it into work or production scenarios, such as editing documents, making worksheet, and writing code?

So after buying iPad Pro, in order to avoid "productivity before buying, iQiyi after buying". We can build a code server on Linux, and then use iPad Pro to remotely access the code server through a browser or app. Use the resources of the server to run the code, and the iPad Pro front-end only needs to be responsible for writing the code and running it, making the iPad Pro a perfect mobile development tool! !

Moreover, in order to achieve remote mobile development anytime and anywhere, we used cpolar intranet penetration to break through the limitations of the local area network and realize that we can also use iPad Pro to write code and develop 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

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

Open ubuntu command line execution

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

When you need to enter the login account password for Ubuntu, enter the password and wait for the installation to complete.

The following information indicates successful installation

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

export PASSWORD=”000000”

Check the IP address and use it 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 appearance of address and port number information indicates success.

Then open the browser and access http://192.168.30.128:8080/ through the LAN . If it appears, welcone code-serverit means 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 simple to operate, and does not require a public IP or router.

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

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

• cpolar installation (for 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 cpolar official website backend, click Verify on the left, check 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 services to the system

sudo systemctl enable cpolar

• Start cpolar service

sudo systemctl start cpolar

• Check service status

sudo systemctl status cpolar

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

2.2 Create HTTP tunnel

After installing cpolar intranet penetration locally on the ubuntu system, access the local 9200 port 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 it
• Protocol: http protocol
• Local address: 8080
• Domain name type: Choose a random domain name
• Region: Select China VIP

Click创建

After creation, click Status on the left - Online Tunnel List, view the public network address, and copy it down

3. Test remote access

Open the iPad Pro browser and enter the public network address you just copied to access it. After accessing, enter the password you set earlier. The vscode interface will appear to indicate success.

4. Configure a fixed second-level subdomain name

4.1 Reserve second-level subdomain names

Since the tunnel created using cpolar above 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. This address is a fixed address and will not change randomly [ps: cpolar.cn has been filed]

It should be noted that configuring a fixed second-level subdomain name requires upgrading cpolar to the basic package or above.

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.

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

4.2 Configure the second-level subdomain name

Access the local port 9200, open the cpolar web ui interface, click Tunnel Management - Tunnel List on the left, find the vscode tunnel, and 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 was successfully reserved just now

Click更新

After the tunnel is successfully updated, click Status on the left - Online Tunnel List to view the public network address. At this time, 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 Pro browser again and access the fixed second-level subdomain address that we just configured successfully. The vscode interface appears to indicate success, and we can happily write code.

6. ipad pro remote vscode through software

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

6.1 Create 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 it
• Protocol: tcp protocol
• Local address: 22
• Domain name type: Select a random temporary TCP port
• Region: Select China VIP

Click创建

After the tunnel is successfully created, click Status on the left - Online Tunnel List and copy the generated public network address.

7. ipad pro remote vscode

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

After the download is successful, click to open it. Since the software is paid, you can choose to purchase it freely. Choose free trial here and choose the last free

Enter relevant information

Parameter introduction:

• code-server URL: Fill in the http public network address successfully configured previously [the address accessed by the ipad pro browser]
• Instance password: Password configured by code-server
• Host: Fill in the public network address of the 22 tunnel we successfully created earlier.
• Username: This fills in the username of the ubuntu system
• Port: This is the default setting and does not need to be modified.
• Authentication: This fills in the password corresponding to the ubuntu system username.

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

8. Configure fixed TCP port address

Since the ssh port 22 tunnel we created previously selected a random temporary address, the address will change within 24 hours. In order to make the vscode connection in our iPad Pro smoother, we need to fix the public network address of ssh.

Note that you need to upgrade the cpolar package to the professional package or above.

8.1 Reserve fixed TCP addresses

Log in to the cpolar official website backend , click Reserve on the left, and find the reserved TCP address:

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

Click保留

The fixed TCP address is retained successfully. The system generates the corresponding public network address + fixed port number and copies them.

8.2 Configure fixed TCP port address

Visit http://127.0.0.1:9200/ with your browser to log in to the cpolar web UI management interface, click Tunnel Management - Tunnel List on the left dashboard, 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 was successfully reserved just now

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 you just modified has been updated to a fixed TCP port address. Copy it.

9. Remote vscode using fixed TCP address

On the iPad Pro, open the servediter for code-server software, modify the host parameters, 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 making the changes, 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 iPad Pro to start happy programming! The public network address will no longer change randomly.

Reprinted from cpolar pole cloud article: [How to make iPad Pro your productivity tool? Use Vscode to write code on the ipad pro for development](https://www.cpolar.com/blog/write-code-on-the-ipad pro)