Hotline:0904 558 448
- Việt Nam
English
Việt NamEnglishNgày đăng: 17 tháng 8 năm 2023
Code-server là một cloud IDE mã nguồn mở, cho phép truy cập và sử dụng IDE trực tiếp từ trình duyệt web. Trong bài viết dưới đây, CloudFly sẽ hướng dẫn bạn cách cài đặt nền tảng Cloud IDE code-server trên máy chủ Ubuntu 20.04 và triển khai với tên miền của bạn, được bảo mật bằng chứng chỉ TLS Let’s Encrypt miễn phí. Hãy cùng theo dõi cách cài đặt nền tảng IDE đám mây trên Ubuntu 20.04 và thực hiện theo nhé.
Để cài đặt được nền tảng IDE đám mây code-server trên Ubuntu 20.04 trước hết đầu tiền bạn phải cài đặt webserver Nginx.
1. Cài đặt Nginx trên Ubuntu 20.04
Cập nhật lại hệ thống
- sudo apt update
Cài đặt Nginx
- sudo apt install nginx
Khởi động Nginx
- sudo systemctl start nginx
Xem trạng thái Nginx
- sudo systemctl status nginx
2. Cài đặt code-server
Bạn lưu trữ tất cả các dữ liệu liên quan đến code-server trong một thư mục có tên là ~/code-server. Tạo thư mục bằng câu lệnh sau:
- mkdir ~/code-server
Chuyển tiếp thư mục này:
- cd ~/code-server
Bạn cần truy cập Github releases page của code-server và chọn phiên bản Linux mới nhất (file chứa ‘linux’ trong tên của nó). Bạn tải về wget bằng câu 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 đó, bạn giải nén file:
- tar -xzvf code-server-3.3.1-linux-amd64.tar.gz
Bạn sẽ nhận được một thư mục có tên giống như file bạn đầu bạn đã tải xuống, chứa mã nguồn của code-server. Sao chép nó vào /usr/lib/code-server để có thể truy cập nó trong toàn hệ thống, sử dụng câu lệnh sau:
- sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server
Tiếp theo, bạn tạo symbolic link tại /usr/bin/code-server trỏ đến code-server thực thi:
- sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server
Tạo một thư mục cho code-server để lưu trữ dữ liệu người dùng:
- sudo mkdir /var/lib/code-server
Bây giờ, bạn đã tải xuống code-server và thiết lập nó có sẵn trong toàn hệ thống. Hãy tạo một dịch vụ systemd để giữ code-server luôn chạy dưới nền.
Lưu cấu hình dịch vụ trong file có tên code-server.service trong thư mục /lib/systemd/system. Bạn tạo nó bằng trình chỉnh sửa văn bản:
- sudo vi /lib/systemd/system/code-server.service
Thêm các dòng sau:
[Unit]
Description=code-server
After=nginx.service
[Service]
Type=simple
Environment=PASSWORD=mật_khẩu_của_bạn
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
Hãy nhớ thay thế "mật_khẩu_của_bạn" bằng một mật khẩu riêng của mình, sau đó nhấn lưu và đóng tệp.
Chạy câu lệnh sau để bắt đầu dịch vụ code-server:
- sudo systemctl start code-server
Kiểm tra lại xem code-server đã chạy đúng cách hay chưa bằng cách xem trạng thái hiện tại:
- sudo systemctl status code-server
Bạn sẽ nhận được output tương tự như sau:
● code-server.service - code-server
Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor >
Active: active (running) since Tue 2023-08-22 08:57:57 +07; 6s ago
Main PID: 12560 (node)
Tasks: 18 (limit: 1070)
Memory: 36.7M
CGroup: /system.slice/code-server.service
├─12560 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/>
└─12580 /usr/lib/code-server/lib/node /usr/lib/code-server --bind->
Aug 22 08:57:57 ubuntu20-04code-serveride systemd[1]: Started code-server.
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info Wrote defau>
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info Using confi>
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info Using user->
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info code-server>
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info HTTP server>
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info - Using>
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info - To di>
Aug 22 08:57:57 ubuntu20-04code-serveride code-server[12580]: info - Not ser>
Để code-server tự động khởi động sau khi khởi động lại máy chủ, hãy bật dịch vụ của code-server bằng cách chạy câu lệnh sau:
- sudo systemctl enable code-server
3. Khai báo code-server trên domain
Về cơ bản, các tệp cấu hình web được lưu trữ tại /etc/nginx/sites-available, sau đó phải symlink tới /etc/nginx/sites-enabled để active.
Bạn cần cấu hình để khai báo code-server trên tên miền trong một tệp có tên là code-server.conf, dưới /etc/nginx/sites-available. Sử dụng trình chỉnh sửa văn bản tùy ý:
- sudo vi /etc/nginx/sites-available/code-server.conf
Thêm các dòng lệnh sau:
server {
listen 80;
listen [::]:80;
server_name hoanhien.online;
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ế "hoanhien.online" bằng tên miền bạn mong muốn, sau đó nhấn để lưu và đóng file.
Để cấu hình trang web này hoạt động, bạn cần một số symlink trong thư mục /etc/nginx/sites-enabled bằng cách chạy câu 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, sử dụng câu lệnh sau đây:
- sudo nginx -t
Bạn sẽ nhận được output như 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
4. Bảo mật tên miền
Để cài đặt phiên bản mới nhất của Certbot và plugin Nginx đi kèm, bạn chạy câu lệnh sau đây:
- sudo apt install certbot python3-certbot-nginx
Ở trong yêu cầu ban đầu, bạn đã bật tường lửa ufw và cấu hình nó cho phép lưu HTTP traffic không được mã hóa. Để có thể truy cập được trang web bảo mật, bây giờ bạn cần cấu hình cho phép nhận traffic đã được mã hóa bằng câu lệnh sau:
- sudo ufw allow https
Output nhận được là:
Output
Rule added
Rule added (v6)
Tương tự như Nginx, bạn sẽ cần reload để cấu hình có hiệu lực:
- sudo ufw reload
Kết quả trả về:
Output
Firewall reloaded
Trên trình duyệt, bạn truy cập vào tên miền đã sử dụng cho code-server sẽ nhìn thấy màn hình đăng nhập như dưới đây:
Code-server đang yêu cầu bạn nhập mật khẩu. Nhập mật khẩu đã được bạn thiết lập ở bước trước rồi nhấn ENTER để vào IDE. Ngay lập tức giao diện đồ họa của trình chỉnh sửa code-server sẽ hiện ra:
Như vậy, bạn đã xác nhận được rằng code-server đã khai báo đúng tên miền, việc tiếp theo là cài đặt chứng chỉ TLS Let’s Encrypt để bảo mật bằng Certbot.
Để yêu cầu chứng chỉ cho tên miền, bạn chạy lệnh sau:
- sudo certbot --nginx -d hoanhien.online
Trong lệnh này, bạn chạy certbot để yêu cầu chứng chỉ tên miền, truyền tên miền của bạn tới tham số -d. Cờ --nginx cho phép tự động thay đổi cấu hình web Nginx để hỗ trợ HTTPS. Lưu ý cần thay thế "hoanhien.online" bằng tên miền 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 để nhận thông báo khẩn cấp và chấp nhận các điều khoản dịch vụ EFF. Sau đó, Certbot sẽ yêu cầu chứng chỉ cho tên miền từ Let’s Encrypt. Bạn sẽ được hỏi rằng có muốn chuyển hướng tất cả traffic HTTP sang HTTPS 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):
Tùy chọn thứ hai được đề xuất để tối đa hóa bảo mật, sau khi nhập lựa chọn của mình, bạn nhấn ENTER.
Kết quả trả về như sau:
Output
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/hoanhien.online/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/hoanhien.online/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 cho thấy Certbot đã tạo thành công chứng chỉ TLS và áp dụng vào cấu hình Nginx cho tên miền của bạn. Bạn có thể tải lại tên miền code-server trong trình duyệt và nhìn thấy một biểu tượng ổ khóa bên trái địa chỉ trang web. Điều này có nghĩa là kết nối đã được bảo mật an toàn.
Bây giờ bạn có thể truy cập vào code-server tại tên miền thông qua Nginx server proxy đã bảo mật an toàn và xem giao diện người dùng của code-server.
5. Sử dụng code-server interface
Ở bước này, bạn sẽ sử dụng một số tính năng của giao diện code-server. Vì code-server là Visual Studio Code chạy trên cloud nên giao diện tương tự như phiên bản trên desktop.
Ở bên trái IDE có một hàng dọc gồm sáu button gồm các tính năng thường được sử dụng trong một bảng gọi là Activity Bar.
Thanh này có thể tùy chọn di chuyển các chế độ xem sang một vị trí khác loại bỏ chúng khỏi thanh. Theo mặc định, nút đầu tiên sẽ mở menu chung trong dropdown, chế độ xem thứ hai mở Explorer panel, cung cấp điều hướng dạng cây của cấu trúc project. Bạn có thể quản lý các thư mục và tệp 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 sẽ cung cấp truy cập đến chức năng tìm kiếm và thay thế.
Tiếp theo đó là chế độ xem hệ thống điều khiển mã nguồn, như Git.
Tùy chọn gỡ lỗi trên thanh Activity Bar cung cấp tất cả các hoạt động để gỡ lỗi trong bảng điều khiển. Visual Studio Code tích hợp hỗ trợ trình gỡ lỗi Node.js runtime và bất kỳ ngôn ngữ nào biên dịch thành 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 yêu cầu. Các cấu hình trình gỡ lỗi có thể lưu trong tệp launch.json.
Chế độ cuối cùng trong thanh Activity Bar cung cấp menu để truy cập các tiện ích mở rộng có sẵn trên Marketplace.
Phần trung tâm của GUI là trình soạn thảo, bạn có thể tách ra bằng các tab để chỉnh sửa code. Bạn cũng có thể thay đổi editing view thành hệ thống lưới hoặc các tệp cạnh nhau.
Sau khi tạo một tệp mới thông qua File menu, một tệp trống sẽ được mở trong tab mới và khi lưu lại thì tên của tệp sẽ được hiển thị trong bảng điều khiển Explorer. Tạo các thư mục bằng cách nhấp chuột phải vào thanh bên Explorer và nhấn vào New Folder. Mở rộng một thư mục bằng cách nhấp vào tên của nó và kéo thả tệp, thư mục lên các phần trên của cấu trúc để di chuyển chúng đến vị trí mới.
Bạn có thể truy cập vào terminal bằng cách nhập CTRL + SHIFT + ` hoặc nhấn vào Terminal trong menu trên cùng sau đó chọn New Terminal. Terminal sẽ mở ra ở bên dưới và thư mục làm việc sẽ được đặt trong workspace của project, nơi chứa các tệp và thư mục được hiển thị trong bảng điều khiển Explorer.
Hy vọng những thông tin trên đã giúp bạn hiểu hơn các bước cài đặt nền tảng IDE đám mây code-server trên Ubuntu 20.04. Nếu bạn còn thắc mắc hay muốn thuê Cloud Server, hãy liên hệ ngay với CloudFly để được tư vấn và hỗ trợ nhanh chóng. Đội ngũ kỹ thuật có chuyên môn cao của chúng tôi luôn sẵn sàng 24/7 giải quyết mọi vấn đề của bạn.
THÔNG TIN LIÊN HỆ: