GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 20/05/2020 | 00:00 GMT+7

Cách thiết lập Nền tảng Cloud IDE server mã trên Ubuntu 20.04

Với các công cụ dành cho nhà phát triển chuyển sang cloud , việc tạo và áp dụng các nền tảng IDE (Môi trường phát triển tích hợp) trên cloud đang ngày càng phát triển. Cloud IDE cho phép cộng tác trong thời gian thực giữa các group nhà phát triển để làm việc trong một môi trường phát triển thống nhất, giảm thiểu sự không tương thích và nâng cao năng suất. Có thể truy cập thông qua trình duyệt web, IDE cloud có sẵn từ mọi loại thiết bị hiện đại.

server mã là Microsoft Visual Studio Code chạy trên server từ xa và có thể truy cập trực tiếp từ trình duyệt của bạn. Visual Studio Code là một trình soạn thảo mã hiện đại với hỗ trợ Git tích hợp, một trình gỡ lỗi mã, tự động hoàn thành thông minh và các tính năng có thể tùy chỉnh và mở rộng. Điều này nghĩa là bạn có thể sử dụng các thiết bị khác nhau chạy các hệ điều hành khác nhau và luôn có sẵn một môi trường phát triển nhất quán.

Trong hướng dẫn này, bạn sẽ cài đặt nền tảng IDE cloud server mã trên máy tính Ubuntu 20.04 của bạn và hiển thị nó tại domain của bạn, được bảo mật bằng certificate Let's Encrypt TLS miễn phí. Cuối cùng, bạn sẽ có Microsoft Visual Studio Code chạy trên server Ubuntu 20.04, có sẵn tại domain của bạn và được bảo vệ bằng password .

Yêu cầu

  • Server chạy Ubuntu 20.04 có RAM ít nhất 2GB, quyền truy cập root và account sudo, không phải root. Bạn có thể cài đặt điều này theo hướng dẫn cài đặt server ban đầu này .

  • Nginx được cài đặt trên server của bạn. Để có hướng dẫn về cách thực hiện việc này, hãy hoàn thành các Bước từ 1 đến 4 của Cách cài đặt Nginx trên Ubuntu 20.04 .

  • Tên domain đã đăng ký đầy đủ cho server mã lưu trữ, được trỏ đến server của bạn. Hướng dẫn này sẽ sử dụng code-server. your-domain trong suốt. Bạn có thể mua domain trên Namecheap , nhận một domain miễn phí trên Freenom hoặc sử dụng công ty đăng ký domain mà bạn chọn. Đối với DigitalOcean, bạn có thể làm theo phần giới thiệu này về DigitalOcean DNS để biết chi tiết về cách thêm chúng.

Bước 1 - Cài đặt server mã

Trong phần này, bạn sẽ cài đặt server mã trên server của bạn . Điều này đòi hỏi phải download version mới nhất và tạo một dịch vụ systemd sẽ giữ cho server mã luôn chạy ở chế độ nền. Bạn cũng sẽ chỉ định policy khởi động lại cho dịch vụ để server mã vẫn sẵn dùng sau khi có thể xảy ra sự cố hoặc khởi động lại.

Bạn sẽ lưu trữ tất cả dữ liệu liên quan đến server mã trong một folder có tên ~/code-server . Tạo nó bằng cách chạy lệnh sau:

  • mkdir ~/code-server

Điều hướng đến nó:

  • cd ~/code-server

Bạn cần truy cập trang phát hành Github của server mã và chọn bản dựng Linux mới nhất (tệp sẽ chứa 'linux' trong tên của nó). Tại thời điểm viết bài, version mới nhất là 3.3.1 . Download bằng wget bằng cách chạy lệnh sau:

  • wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz

Sau đó, extract repository bằng lệnh: 

  • tar -xzvf code-server-3.3.1-linux-amd64.tar.gz

Bạn sẽ nhận được một folder có tên chính xác như file root bạn đã download , chứa mã nguồn server mã. Sao chép nó vào /usr/lib/code-server để bạn có thể truy cập nó trên toàn hệ thống bằng cách chạy lệnh sau:

  • sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server

Sau đó, tạo một softlink tại /usr/bin/code-server , trỏ đến file thực thi server mã:

  • sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

Tiếp theo, tạo một folder cho server mã, nơi nó sẽ lưu trữ dữ liệu user :

  • sudo mkdir /var/lib/code-server

Đến đây bạn đã download server mã và làm cho nó khả dụng trên toàn hệ thống, bạn sẽ tạo một dịch vụ systemd để giữ cho server mã luôn chạy ở chế độ nền.

Bạn sẽ lưu trữ cấu hình dịch vụ trong một file có tên code-server.service , trong folder /lib/systemd/system , nơi systemd lưu trữ các dịch vụ của nó. Tạo nó bằng editor của bạn:

  • sudo nano /lib/systemd/system/code-server.service

Thêm các dòng sau:

/lib/systemd/system/code-server.service
[Unit] Description=code-server After=nginx.service  [Service] Type=simple Environment=PASSWORD=your_password ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password Restart=always  [Install] WantedBy=multi-user.target

Ở đây, trước tiên bạn chỉ định mô tả của dịch vụ. Sau đó, bạn nói rằng dịch vụ nginx phải được khởi động trước dịch vụ này. Sau phần [Unit] , bạn xác định loại dịch vụ ( simple nghĩa là quá trình phải được chạy đơn giản) và cung cấp lệnh sẽ được thực thi.

Bạn cũng chỉ định rằng file thực thi server mã global phải được bắt đầu bằng một vài đối số cụ thể cho server mã. --bind-addr 127.0.0.1:8080 liên kết nó với localhost ở cổng 8080 , vì vậy nó chỉ có thể truy cập trực tiếp từ bên trong server của bạn. --user-data-dir /var/lib/code-server đặt folder dữ liệu user và --auth password chỉ định rằng nó sẽ xác thực khách truy cập bằng password , được chỉ định trong biến môi trường PASSWORD khai báo ở dòng phía trên nó.

Hãy nhớ thay thế your_password bằng password bạn muốn, sau đó lưu file .

Dòng tiếp theo yêu cầu systemd khởi động lại server mã trong tất cả các sự kiện trục trặc (ví dụ: khi nó bị treo hoặc quá trình bị dừng ). Phần [Install] yêu cầu systemd khởi động dịch vụ này khi có thể đăng nhập vào server của bạn.

Khởi động dịch vụ server mã bằng cách chạy lệnh sau:

  • sudo systemctl start code-server

Kiểm tra xem nó đã khởi động chính xác chưa bằng cách quan sát trạng thái của nó:

  • sudo systemctl status code-server

Bạn sẽ thấy kết quả tương tự như:

Output
● code-server.service - code-server      Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)      Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago    Main PID: 14985 (node)       Tasks: 18 (limit: 2345)      Memory: 26.1M      CGroup: /system.slice/code-server.service              ├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth>              └─15010 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password  May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server. May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Wrote default config file to ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Using config file ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Using user-data-dir /var/lib/code-server May 20 13:03:40 code-server-update-2004 code-server[15010]: info  code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3 May 20 13:03:40 code-server-update-2004 code-server[15010]: info  HTTP server listening on http://127.0.0.1:8080 May 20 13:03:40 code-server-update-2004 code-server[15010]: info      - Using password from $PASSWORD May 20 13:03:40 code-server-update-2004 code-server[15010]: info      - To disable use `--auth none` May 20 13:03:40 code-server-update-2004 code-server[15010]: info    - Not serving HTTPS

Để làm cho server mã tự động khởi động sau khi server khởi động lại, hãy bật dịch vụ của nó bằng cách chạy lệnh sau:

  • sudo systemctl enable code-server

Trong bước này, bạn đã download server mã và cung cấp nó trên phạm vi global . Sau đó, bạn đã tạo một dịch vụ systemd cho nó và kích hoạt nó, vì vậy server mã sẽ bắt đầu mỗi khi server khởi động. Tiếp theo, bạn sẽ hiển thị nó tại domain của bạn bằng cách cấu hình Nginx để phục vụ như một Reverse Proxy giữa khách truy cập và server mã.

Bước 2 - Hiển thị server mã tại Miền của bạn

Trong phần này, bạn sẽ cấu hình Nginx làm Reverse Proxy cho server mã.

Như bạn đã học ở bước yêu cầu Nginx, các file cấu hình trang web của nó được lưu trữ trong /etc/nginx/sites-available và sau đó phải được softlink với /etc/nginx/sites-enabled để hoạt động.

Bạn sẽ lưu trữ cấu hình để hiển thị server mã tại domain của bạn trong một file có tên code-server.conf , trong /etc/nginx/sites-available . Bắt đầu bằng cách tạo nó bằng editor :

  • sudo nano /etc/nginx/sites-available/code-server.conf

Thêm các dòng sau:

/etc/nginx/sites-available/code-server.conf
server {     listen 80;     listen [::]:80;      server_name code-server.your-domain;      location / {       proxy_pass http://localhost:8080/;       proxy_set_header Upgrade $http_upgrade;       proxy_set_header Connection upgrade;       proxy_set_header Accept-Encoding gzip;     } }

Thay thế code-server. your-domain của bạn với code-server. your-domain mong muốn của bạn, sau đó lưu file .

Trong file này, bạn xác định rằng Nginx sẽ lắng nghe cổng HTTP 80 . Sau đó, bạn chỉ định server_name cho Nginx biết domain nào chấp nhận yêu cầu và áp dụng cấu hình cụ thể này. Trong khối tiếp theo, đối với vị trí root ( / ), bạn chỉ định rằng các yêu cầu phải được chuyển qua lại tới server mã đang chạy tại localhost:8080 . Ba dòng tiếp theo (bắt đầu bằng proxy_set_header ) yêu cầu Nginx chuyển một số tiêu đề yêu cầu HTTP cần thiết cho hoạt động chính xác của WebSockets, mà server mã sử dụng rộng rãi.

Để làm cho cấu hình trang web này hoạt động, bạn cần tạo một softlink của nó trong folder /etc/nginx/sites-enabled bằng lệnh: 

  • sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

Để kiểm tra tính hợp lệ của cấu hình, hãy chạy lệnh sau:

  • sudo nginx -t

Bạn sẽ thấy kết quả sau:

Output
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

Để cấu hình có hiệu lực, bạn cần khởi động lại Nginx:

  • sudo systemctl restart nginx

Bây giờ, bạn có thể truy cập cài đặt server mã tại domain của bạn . Trong bước tiếp theo, bạn sẽ bảo mật nó bằng cách áp dụng certificate Let's Encrypt TLS miễn phí.

Bước 3 - Bảo mật domain của bạn

Trong phần này, bạn sẽ bảo mật domain của bạn bằng certificate Let's Encrypt TLS mà bạn sẽ cấp bằng Certbot.

Để cài đặt version mới nhất của Certbot và plugin Nginx của nó, hãy chạy lệnh sau:

  • sudo apt install certbot python3-certbot-nginx

Là một phần của yêu cầu , bạn đã bật ufw (Tường lửa không phức tạp) và cấu hình nó để cho phép lưu lượng truy cập HTTP không được mã hóa. Để có thể truy cập trang web được bảo mật, bạn cần phải cấu hình nó để chấp nhận truy cập được mã hóa bằng cách chạy lệnh sau:

  • sudo ufw allow https

Đầu ra sẽ là:

Output
Rule added Rule added (v6)

Tương tự với Nginx, bạn cần reload nó để cấu hình có hiệu lực:

  • sudo ufw reload

Đầu ra sẽ hiển thị:

Output
Firewall reloaded

Sau đó, trong trình duyệt của bạn, chuyển đến domain bạn đã sử dụng cho server mã. Bạn sẽ thấy dấu nhắc đăng nhập server mã.

dấu nhắc đăng nhập server mã

server mã đang yêu cầu bạn nhập password của bạn. Nhập mã bạn đã đặt ở bước trước và nhấn Enter IDE . Đến đây bạn sẽ nhập server mã và ngay lập tức thấy GUI editor của nó.

GUI server mã

Đến đây bạn đã kiểm tra rằng server mã được hiển thị chính xác trong domain của bạn, bạn sẽ cài đặt certificate Let's Encrypt TLS để bảo mật nó, bằng cách sử dụng Certbot.

Để certificate request cho domain của bạn, hãy chạy lệnh sau:

  • sudo certbot --nginx -d code-server.your-domain

Trong lệnh này, bạn chạy certbot để certificate request cho domain của bạn — bạn chuyển domain với tham số -d . Cờ --nginx cho biết nó tự động thay đổi cấu hình trang Nginx để hỗ trợ HTTPS. Hãy nhớ thay thế code-server. your-domain của bạn với domain của bạn.

Nếu đây là lần đầu tiên bạn chạy Certbot, bạn cần cung cấp địa chỉ email cho các thông báo khẩn cấp và chấp nhận Điều khoản dịch vụ của EFF. Sau đó, Certbot sẽ certificate request cho domain của bạn từ Let's Encrypt. Sau đó, nó sẽ hỏi bạn xem bạn có muốn chuyển hướng tất cả truy cập HTTP sang HTTPS hay không:

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: No redirect - Make no further changes to the webserver configuration. 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Bạn nên chọn tùy chọn thứ hai để tối đa hóa bảo mật. Sau khi bạn nhập lựa chọn của bạn , hãy nhấn ENTER .

Đầu ra sẽ tương tự như sau:

Output
IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at:  /etc/letsencrypt/live/code-server.your-domain/fullchain.pem  Your key file has been saved at:  /etc/letsencrypt/live/code-server.your-domain/privkey.pem  Your cert will expire on ... To obtain a new or tweaked  version of this certificate in the future, simply run certbot again  with the "certonly" option. To non-interactively renew *all* of  your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot  configuration directory at /etc/letsencrypt. You should make a  secure backup of this folder now. This configuration directory will  also contain certificates and private keys obtained by Certbot so  making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by:   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate  Donating to EFF:                    https://eff.org/donate-le

Điều này nghĩa là Certbot đã tạo thành công certificate TLS và áp dụng chúng vào cấu hình Nginx cho domain của bạn. Như vậy, bạn có thể reload domain server mã của bạn trong trình duyệt và quan sát một ổ khóa ở bên trái địa chỉ trang web, điều này nghĩa là kết nối của bạn được bảo mật đúng cách.

Đến đây bạn đã có thể truy cập server mã tại domain của bạn thông qua Reverse Proxy Nginx bảo mật, bạn đã sẵn sàng để xem lại giao diện user của server mã.

Bước 4 - Sử dụng Giao diện server mã

Trong phần này, bạn sẽ sử dụng một số tính năng của giao diện server mã. Vì server mã là Visual Studio Code chạy trên cloud nên nó có giao diện giống như version máy tính để bàn độc lập.

Ở phía bên trái của IDE, có một hàng dọc gồm sáu nút mở các tính năng thường được sử dụng nhất trong console bên được gọi là Thanh hoạt động.

GUI server mã - Sidepanel

Thanh này có thể tùy chỉnh để bạn có thể di chuyển các chế độ xem này sang một thứ tự khác hoặc xóa chúng khỏi thanh. Theo mặc định, nút đầu tiên mở menu chung trong menu thả xuống, trong khi chế độ xem thứ hai mở bảng Explorer cung cấp chuyển dạng cây về cấu trúc của dự án. Bạn có thể quản lý các folder và file của bạn tại đây — tạo, xóa, di chuyển và đổi tên chúng nếu cần. Chế độ xem tiếp theo cung cấp quyền truy cập vào chức năng tìm kiếm và thay thế.

Sau đây, theo thứ tự mặc định, là chế độ xem của bạn về các hệ thống điều khiển nguồn, như Git . Mã Visual Studio cũng hỗ trợ các nhà cung cấp kiểm soát nguồn khác và bạn có thể tìm thấy hướng dẫn thêm cho các stream công việc kiểm soát nguồn với editor trong tài liệu này.

Ngăn Git với menu ngữ cảnh mở

Tùy chọn trình gỡ lỗi trên Thanh hoạt động cung cấp tất cả các hành động phổ biến để gỡ lỗi trong console . Visual Studio Code đi kèm với hỗ trợ tích hợp cho trình gỡ lỗi thời gian chạy Node.js và bất kỳ ngôn ngữ nào chuyển đổi sang Javascript . Đối với các ngôn ngữ khác, bạn có thể cài đặt tiện ích mở rộng cho trình gỡ lỗi bắt buộc. Bạn có thể lưu cấu hình gỡ lỗi trong file launch.json .

Chế độ xem trình gỡ lỗi khi mở launcher.json

Chế độ xem cuối cùng trong Thanh hoạt động cung cấp menu để truy cập các tiện ích mở rộng có sẵn trên Thị trường .

GUI server mã - Tab

Phần trung tâm của GUI là editor , bạn có thể phân tách phần này theo các tab để chỉnh sửa mã của bạn . Bạn có thể thay đổi chế độ xem chỉnh sửa của bạn thành hệ thống lưới hoặc các file song song.

Chế độ xem lưới editor

Sau khi tạo file mới thông qua menu Tệp , file trống sẽ mở trong tab mới và sau khi được lưu, tên file sẽ có thể xem được trong console bên Explorer. Tạo folder có thể được thực hiện bằng cách nhấp chuột phải vào thanh bên Explorer và nhấp vào Thư mục mới . Bạn có thể mở rộng một folder bằng cách nhấp vào tên của nó cũng như kéo và thả các file và folder lên các phần trên của hệ thống phân cấp để di chuyển chúng đến một vị trí mới.

GUI server mã - Thư mục mới

Bạn có thể truy cập vào một terminal bằng lệnh CTRL+SHIFT+` hoặc bằng cách nhấp vào Thiết bị terminal trong menu thả xuống phía trên và chọn Thiết bị terminal mới .Thiết bị terminal sẽ mở trong console phía dưới và folder làm việc của nó sẽ được đặt thành không gian làm việc của dự án, nơi chứa các file và folder được hiển thị trong console bên Explorer.

Bạn đã khám phá tổng quan cấp cao về giao diện server mã và xem xét một số tính năng thường được sử dụng nhất.

Kết luận

Như vậy, bạn có server mã, một IDE cloud đa năng, được cài đặt trên server Ubuntu 20.04, được hiển thị tại domain của bạn và được bảo mật bằng certificate Let's Encrypt. Như vậy, bạn có thể làm việc trên các dự án riêng lẻ cũng như trong môi trường cộng tác group . Chạy IDE cloud sẽ giải phóng tài nguyên trên máy local của bạn và cho phép bạn mở rộng tài nguyên khi cần. Để biết thêm thông tin, hãy xem tài liệu Visual Studio Code để biết thêm các tính năng và hướng dẫn chi tiết về các thành phần khác của server mã.

Nếu bạn muốn chạy server mã trên cụm DigitalOcean Kubernetes của bạn , hãy xem hướng dẫn của ta về Cách cài đặt Nền tảng Cloud IDE server mã trên DigitalOcean Kubernetes .

Tags:

Các tin liên quan

Khái niệm cơ bản về việc sử dụng Sed Stream Editor để thao tác văn bản trong Linux
2020-05-19
Sedan trung gian: Thao tác các dòng văn bản trong môi trường Linux
2020-05-19
Cách cài đặt Linux, Nginx, MySQL, PHP ( LEMP) trên Ubuntu 20.04 [Quickstart]
2020-05-14
Cách thiết lập Nền tảng Cloud IDE server mã trên Ubuntu 18.04
2020-05-13
Cách tạo server Minecraft trên Ubuntu 18.04
2020-05-07
Cách tạo server Minecraft trên Ubuntu 20.04
2020-05-07
Cách cài đặt Linux, Apache, MySQL, PHP (LAMP) trên Ubuntu 20.04 [Quickstart]
2020-05-07
Cách cài đặt Linux, Apache, MySQL, PHP (LAMP) trên Ubuntu 20.04
2020-04-29
Cách cài đặt Linux, Nginx, MySQL, PHP ( LEMP) trên Ubuntu 20.04
2020-04-29
Thiết lập bảo mật server quan trọng với Ubuntu 20.04
2020-04-23