Lightweight toss plan 3, develop in the browser - build your own development bucket (Part 1)

Preface

I need to go out a few days ago , There happened to be a serious problem in a certain project BUG, But I didn't bring a computer at that time , I borrowed my friend's computer because it didn't have what I usually use IDE, There is no relevant environment , The process of repair was painful , Finally, it can only be completed in the editor of the pagoda ... At this time, I can't help thinking , Is it possible to build such a system based on WEB The development of the whole family barrel , So that developers can develop with a browser anytime, anywhere ？ Do as you say ！

Text

Since we are going to build such a family barrel , Then you need to prepare the following items ：

• VPS One server
• A domain name （ If you just remember IP Also no problem ）

First of all VPS The server , Just like our title , Lightweight toss program , Therefore, the server we choose here is the lightweight application server of Tencent cloud Lighthouse. Tencent cloud's lightweight servers are active 、 Great discount 、 Cost effective and widely known among small and medium-sized webmaster groups in China , Although there is no elastic network card and so on CVM The function of , But it has been launched recently VPC Intranet interconnection also complements a big weakness . For these small webmasters with little demand, we can say that they basically cover the whole , And there are no restrictions CPU, One core is stronger than the four cores of some hearses .

image-20210815185421450

But also long-term play activities （https://cloud.tencent.com/act/new）,99/1 year , This price is the king of cost performance , Don't miss it if you are interested .

zero 、 Basic preparation

Since it's a family bucket , Then you must install multiple applications , And suffer from the thickness of the wallet in the pocket , It must be that you need a machine to do all the work . Then you need to install the following environment ：

• Pagoda panel （ Easy to manage , If you are a big man, you can ignore ）
• Nginx（ It is mainly used for reverse substitution , If it is a domestic machine + Domain names that have not been filed may not need to be reversed , Direct analytical IP Just add the port ）
• Docker（ Quickly install some apps ）

（0） Pagoda panel

The installation of the pagoda panel is very simple , According to this post on the official website ：https://www.bt.cn/bbs/thread-19376-1-1.html

Centos Installation command ：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

Ubuntu/Deepin Installation command ：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

Debian Installation command ：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh

Fedora Installation command :

wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

Select different installation commands according to the operating system of your server and execute , encounter Do you want to install Bt-Panel to the /www directory now?(y/n) Input y Back carriage return , After a while, it will be installed successfully ：

==================================================================
Congratulations! Installed successfully!
==================================================================
 Internet panel address : http://xxx.xxx.xxx.xxx:8888/6e21e07d
 Intranet panel address : http://10.0.8.17:8888/6e21e07d
username: gunftd4a
password: f92c3dd4
If you cannot access the panel,
release the following panel port [8888] in the security group
 If you can't access the panel , Please check the firewall / Does the security group have a release panel [8888] port 
==================================================================
Time consumed: 0 Minute!
[[email protected] ~]# 

We open the browser , Access the Internet panel address above （ Lightweight users remember to go to the firewall to add 8888 port ）, Fill in the randomly generated user name and password , Enter the panel after agreeing to the user agreement . After entering the panel, the first thing is to modify the panel settings , Default 8888 Port modification （ Pay attention to the firewall / The security team released in advance ）, user name 、 password 、 Modify with the security entrance 、 Turn on BasicAuth authentication （ recommend ）, At this point, our pagoda panel has been installed .

（1）Nginx

In the previous step, we installed the pagoda panel , So this step is particularly simple , Click the software store directly in the left column of the pagoda panel , find Nginx Then click Install ：

image-20210815193313309

Click OK and wait for a while to install ：

image-20210815193729477

（2）Docker

Docker It is a containerization technology , We can use containers to quickly build the environment we want / application , It's like a virtual machine , But it is much lighter than the virtual machine .

About Docker We can directly use the official one click installation script to install , The installation command is as follows ：

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

You can also use domestic daocloud One click Install command ：

curl -sSL https://get.daocloud.io/docker | sh

Two orders , You can choose any one , Copy it to the server terminal, paste it and press enter to run , After a while, the installation succeeds .

docker After successful installation , Execute the following command to start docker：

service docker start

Start well docker after , Try to run ：docker ps, Check whether there is any error report .

Last , Let's revise docker Mirror source for , Ensure that you can successfully pull docker Mirror image ; Edit the file /etc/docker/daemon.json（ If it does not exist, you can create a new ）, The contents are as follows ：

{
"registry-mirrors": [
 "https://hub-mirror.c.163.com",
 "https://mirror.baidubce.com"
]
}

If the reader is also using a lightweight server , You can use the acceleration source of Tencent intranet ：mirror.ccs.tencentyun.com.

After editing and saving the file , Enter the command ：service docker restart Give Way docker Restart to load the configuration file , After the restart is completed, enter docker info Check if the setting is successful ：

 Registry Mirrors:
  https://mirror.ccs.tencentyun.com/
 Live Restore Enabled: false

[[email protected] ~]# 

thus , Some of our column preparation processes are over .

One 、 On-line IDE

Since it is programming , Then it must be inseparable from IDE ah , These days , No one really uses Notepad to program .

After a period of searching , We are going to use vscode Officially WEB class vscode：https://github.com/cdr/code-server, From the outside , It is similar to the desktop version vscode identical .

Next is code-server Installation , First, we create a new configuration item directory ：

mkdir ~/.config && mkdir /project

Then directly use docker Installation ：

docker run -itd --name code-server -p 127.0.0.1:8080:8080 \
  -v "$HOME/.config:/home/coder/.config" \
  -v "/project:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

You can see , We will put the... In the container 8080 Port mapping to local 8080 port （ If you use the port directly, you can use the 127.0.0.1 Change it to 0.0.0.0）, And we attached the two newly created directories to the container , In this way, we can modify the files outside the container directly in the container .

Use command docker ps You can see that our container is running ：

[[email protected] ~]# docker ps
CONTAINER ID   IMAGE                         COMMAND                  CREATED          STATUS          PORTS                      NAMES
51fb2363150e   codercom/code-server:latest   "/usr/bin/entrypoint…"   45 seconds ago   Up 44 seconds   127.0.0.1:8080->8080/tcp   code-server
[[email protected] ~]# 

Then there is reverse proxy , Put our domain name （ Use here test.com For demonstration purposes ） Combined with the container environment .

Add a website to the pagoda （ide.test.com）：

image-20210815202500007

Click settings after adding , Add reverse proxy ：

image-20210815202718092

Because of the need to use websocket, Therefore, we need to modify the configuration file , Add the following configuration items ：

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection upgrade;

image-20210815204515678

Open the browser , Enter our website ：ide.test.com

image-20210815202926044

Input cat ~/.config/code-server/config.yaml Look at randomly generated passwords ：

[[email protected] ~]# cat ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: 352e558396b4688211258ebd
cert: false
[[email protected] ~]#

Enter the password to enter , If you want to change your password , You can modify the password in this file directly , Restart the container .

image-20210815204818984

Two 、GIT platform

Now that we have our own IDE, That's just giving the whole git The platform is not beautiful as the record base of our ordinary projects . Do as you say , Because we want multiple applications to be built on the same server , So here we do not choose gitlab（ A bit of configuration ）, Instead, choose a relatively compact gogs（https://github.com/gogs/gogs）.

It's the same thing docker Deploy , In this environment where multiple applications are deployed at the same time , Different applications directly use different containers for isolation , They don't influence each other , Reduces direct interference , It can be said that the advantages are huge .

First, create a new directory as the mount point , Let the data in the container communicate with the external data ：

midir /gogs

Then run the command ：

docker run -p 3022:22 -p 3000:3000 --name=gogs \
-v /gogs:/data  \
-d gogs/gogs

Use command docker ps View the deployment ：

[[email protected] ~]# docker ps
CONTAINER ID   IMAGE                         COMMAND                  CREATED          STATUS          PORTS                                                                              NAMES
529a758630a8   gogs/gogs                     "/app/gogs/docker/st…"   10 seconds ago   Up 10 seconds   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp, 0.0.0.0:3022->22/tcp, :::3022->22/tcp   gogs

It's the same old rule , Let's 3000 Reverse the port , Here we use git.test.com Do a demonstration . Anti substitution process reference codeserver Installation , Because there is no need for websocket, Therefore, there is no need to edit the configuration file .

Visit our domain name after the replacement ：

image-20210815223506425

This is just for convenience , We directly choose to use sqlite As a database .

image-20210815223724298

Apply basic settings , In addition to the application URL Let's change it to ：http://git.test.com outside , Leave the rest as default ：

image-20210815223829494

In the optional settings, set the upper administrator ：

image-20210815224019698

Click Install Now ,GIT The platform has been built ：

image-20210815224147038

Let's take a look at our resource usage （2 nucleus 4G Memory ）：

image-20210815224658414

You can see ,4G Is currently running out of memory 1G, It can be said that it is quite simplified , Small mainframe can also run easily , This makes us free up a lot of space for subsequent application installation .

The latter

Now? , We already have our own online IDE, I have my own GIT platform , It has been able to complete most of the functions often needed in daily development , But that's not enough , Limited space , In the next article , I will continue to take you to improve our developer family bucket package , Continue to complete our browser programming section ~