Devlog/2025-05-20/3 phút
v1

Thiết lập proxy để trải nghiệm Stitch.

Tự chạy proxy server trên EC2 để trải nghiệm Google Stitch cho việc thiết kế giao diện.

#stitch#proxy#devlife
fig.01 — relay.svgsquid :3128ec2 · singaporevnstitch

Khi được biết Google vừa mới ra mắt Stitch, một công cụ cho phép thiết kế giao diện, mình đã nhanh chóng vào đăng ký tài khoản để trải nghiệm thử. Tuy nhiên sau khi đăng nhập vào bằng tài khoản Google của mình thì mình nhận được thông báo dịch vụ không khả dụng. Có lẽ Google chưa ra mắt công khai cho Việt Nam.

Mình nghĩ đến proxy. Tuy nhiên hiện tại mình đang không dùng công cụ proxy nào. Cơ bản mình cũng không thích dùng proxy. Để kiểm chứng việc dùng proxy có thể vào được Stitch, mình nhờ một đứa em kiểm tra, và đúng là có vào được sau khi thiết lập proxy. Mình quyết định tự tạo proxy server để dùng thay vì cài công cụ.

Giải pháp của mình là chạy một proxy server (forward proxy) trên một con server nằm ở nước ngoài. Hiện tại mình đang có một con EC2 nằm ở Singapore. Còn phần mềm proxy, sau khi cân nhắc mình quyết định sử dụng squid.

Quá trình thiết lập cũng khá đơn giản. Đầu tiên là chạy và thiết lập squid. Mình chọn docker để chạy vì đã có sẵn docker trên server rồi. Và đây là câu lệnh mình dùng để chạy squid:

bash
docker run --name squid -d --restart=always \
  --publish 3128:3128 \
  --volume ./squid.conf:/etc/squid/squid.conf \
  --volume ./passwords:/etc/squid/passwords \
  --volume /srv/docker/squid/cache:/var/spool/squid \
  sameersbn/squid:3.5.27-2

Lệnh trên mount hai file từ thư mục hiện tại: squid.conf là cấu hình của squid, passwords là danh sách tài khoản được phép dùng proxy. Proxy mở trên Internet mà không có xác thực sẽ bị người khác dùng ké rất nhanh, nên mình bật xác thực ngay từ đầu.

Dưới đây là một squid.conf tối thiểu có xác thực:

text
# squid.conf
http_port 3128

auth_param basic program /usr/lib/squid/basic_ncsa_auth /etc/squid/passwords
auth_param basic realm proxy
acl authenticated proxy_auth REQUIRED

http_access allow authenticated
http_access deny all

Đường dẫn tới basic_ncsa_auth có thể khác tuỳ image. Nếu squid không khởi động được, kiểm tra đường dẫn đúng trong container:

bash
docker exec squid sh -c 'ls /usr/lib/squid*/basic_ncsa_auth'

File passwords tạo bằng htpasswd, có trong gói apache2-utils trên Ubuntu:

bash
sudo apt install apache2-utils
htpasswd -c passwords <ten-dang-nhap>

Lệnh sẽ hỏi mật khẩu rồi ghi vào file. Sau khi sửa squid.conf hoặc passwords, chạy docker restart squid để squid đọc lại.

Cuối cùng, mở cổng 3128 trong Security Group của EC2, và chỉ mở cho IP của mình thay vì 0.0.0.0/0. Có xác thực rồi nhưng giới hạn IP vẫn bớt được rất nhiều request dò quét.

Kiểm tra proxy từ máy của mình:

bash
curl -x http://<ten-dang-nhap>:<mat-khau>@<ip-ec2>:3128 https://ifconfig.me

Nếu lệnh trả về IP của EC2 thì proxy đã chạy.

Sau khi chạy được squid thì thiết lập proxy cho máy của mình. Mình dùng macOS: vào System Settings → Network → Wi-Fi → Details → Proxies, bật Web proxy (HTTP) và Secure web proxy (HTTPS), điền IP của EC2 và cổng 3128 cho cả hai, bật Proxy server requires password rồi điền tài khoản vừa tạo.

Thiết lập xong proxy thì mình đã vào được stitch thành công. Mình bắt đầu trải nghiệm với một prompt để thiết kế một website. Khá ấn tượng với kết quả ban đầu mà nó đưa ra. Tuy nhiên mình chưa rõ khả năng của nó như thế nào khi cần phải tùy chỉnh thêm các chi tiết nhỏ. Stitch cho phép tải code về hoặc chuyển code sang Figma.

Bài này chỉ ghi lại lần thử đầu tiên. Proxy cho toàn bộ máy cũng có nhược điểm, mọi request đều đi qua Singapore; cách chỉ proxy cho một số domain mình viết ở bài Thiết lập PAC proxy trên MacOS.

Trạm Dev · 2025-05-20 · v1 · EOF
#stitch#proxy#devlife
$ ls ./devlog1 / 7