Nginx + SSH implements Intranet penetration

The project built locally can only run on the local computer through the local server, so how to access the outside world through the IP port of the cloud server?

Environment to prepare:

1. Locally run projects (vUE project as an example: http://localhost:8082)

2. A cloud server, Alibaba Cloud, Tencent Cloud and so on.

3. Nginx has been installed on the cloud server. If nginx is not installed, please install it by yourself.

4. Domain name (optional)

First, log in to the cloud server

SSH user@ip (user indicates the user name of the cloud server, and IP indicates the public IP address of the cloud service.)

Enter the password to access the server directory.

Nginx is installed in /usr/local/nginx

cd /usr/local/nginx

Run the ls command to check the directory of nginx. There is a conf folder. Run the CD conf command to go to the directory. Conf is the default configuration file for nginx.

3. We run mkdir defaultconf in conf to create a defaultconf folder to store our additional nginx configuration. CD Defaultconf goes to this folder. To create our own nginx configuration file, run the touch cross.conf command. Run the vi cross-. conf command to enter the file compilation mode. Press I on the keyboard to enter edit mode and paste in the following code

server {
  listen 8888; Server_name xx.xx.cn server_name xx.xx.cn server_name xx.xx.cn server_name xx.xx.cn server_name xx.xx.cn {proxy_set_header x-real-ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; proxy_pass http://localhost:8899; # here8899An identifier, associated with creating a channel locally, can be set to any value}}Copy the code

At this point, press ESC to exit the editing mode, then enter :wq to exit the file view mode.

/usr/local/nginx/sbin

Run./nginx -s reload. /nginx -t Displays the nginx startup status.

On the local terminal, run the ssh-vnnt -r 8899:localhost:8082 user@ip command

8899 is our nginx configured identifier, localhost:8082 is the access address of our local project, user is the user name of the cloud server, and IP is the public address of the cloud server. Press Enter and enter your cloud server login password. The last few actions represent success.

debug1: client_input_global_request: rtype hostkeys-00@openssh.com want_reply 0
debug1: remote forward success for: listen 8899, connect localhost:8082
debug1: All remote forwarding requests processed
Copy the code

4. Next, we can open the local browser and enter the public IP address of the cloud server (if there is a domain name, it can also be accessed by the domain name) and port number to access the cloud server, for example, XX.xx.xx.xx.xx: 8888.

If Invalid Host header appears, don’t panic, it is caused by the Vue project DevServer, we just need to add a disableHostCheck: true attribute in devServer.

Pay attention to

1. The nginx configuration and installation directory may vary depending on the server environment and version of nginx, but they are all similar. Take time to make sure that the nginx environment is normal and then check whether the configuration is correct.

2. If each operating environment is normal, if the browser keeps spinning on the first visit, don’t worry, wait patiently.