Kết nối website tự host

Bạn chạy code storefront trên máy chủ của mình, ví dụ Vercel hoặc một VPS, và vẫn dùng sản phẩm, đơn hàng và cài đặt của EcomWeb. Khi giao diện đã kết nối được xuất bản, địa chỉ EcomWeb của cửa hàng chuyển khách đến website của bạn.

Cách này dùng được ở mọi gói. Bạn vẫn chỉnh cài đặt của giao diện trong bảng điều khiển.

Lấy code storefront

1. Cài EcomWeb CLI, xem Cài và đăng nhập EcomWeb CLI.
2. Đăng nhập CLI.
3. Tạo dự án storefront cho cửa hàng bằng lệnh bên dưới.
4. Đưa dự án lên máy chủ của bạn, ví dụ một dự án Vercel, để có một địa chỉ https.

# Tạo dự án Next.js cho cửa hàng đang chọn
$ ecomweb storefront init

Chỉ chủ cửa hàng tạo được dự án, vì lệnh cần khóa công khai của cửa hàng. Dự án cần Node.js 24, pnpm và Git trên máy bạn. Nơi chạy nào chạy được Next.js đều dùng được.

Sao chép giao diện để kết nối

Kết nối trên một bản sao để khách không bị chuyển đi trước khi website sẵn sàng.

1. Vào Online Store.
2. Ở giao diện đang sử dụng, bấm biểu tượng ba chấm cạnh nút Tùy chỉnh.
3. Chọn Sao chép.

Bản sao nằm trong Thư viện giao diện, mang tên giao diện kèm chữ (bản sao). Bản sao được tính vào số giao diện gói của bạn cho phép.

Kết nối bản sao với website

1. Trong Thư viện giao diện, ở dòng bản sao, bấm biểu tượng ba chấm.
2. Chọn Chuyển sang Self-hosted.
3. Nhập Địa chỉ trang, ví dụ https://shop.example.com.
4. Nếu website còn chạy ở địa chỉ khác, như bản xem trước trên Vercel, nhập các địa chỉ đó vào Tên miền được phép, mỗi dòng một địa chỉ, không kèm đường dẫn.
5. Bấm Kết nối.

Website được thêm làm một phiên bản của bản sao và dùng ngay. Phiên bản cũ vẫn nằm trong Phiên bản để đổi lại. Tên miền được phép nhận tối đa 20 địa chỉ. Địa chỉ trang và các tên miền này được tự thêm vào danh sách trang dùng được khóa công khai.

Đặt biến môi trường trên máy chủ

Sau khi kết nối, trang có thêm thẻ Biến môi trường với các biến website cần để đọc dữ liệu và cài đặt của cửa hàng.

1. Trong thẻ Biến môi trường, sao chép các dòng ECOMWEB_STORE_REF, ECOMWEB_PUBLISHABLE_KEY và ECOMWEB_API_URL.
2. Thêm các biến này vào cấu hình môi trường trên máy chủ của bạn.
3. Thêm biến SITE_URL bằng địa chỉ website của bạn.
4. Build và chạy lại website.

Các biến này được đưa vào code lúc build, nên mỗi lần đổi biến cần build lại.

Đẩy cài đặt giao diện lên EcomWeb

Để chỉnh cài đặt của giao diện trong bảng điều khiển, bạn đẩy schema của dự án lên sau mỗi lần thay đổi, ví dụ trong CI. Lệnh có sẵn trong thẻ Cài đặt giao diện, với mã giao diện đã điền.

# Chạy trong thư mục dự án
$ ecomweb theme schema push --theme <mã giao diện>

Trong CI, dùng một khóa API có phạm vi deploy:storefront, xem Tạo và quản lý khóa API.

Xuất bản giao diện đã kết nối

1. Mở website của bạn và kiểm tra trang chạy đúng.
2. Vào Online Store.
3. Ở dòng bản sao trong Thư viện giao diện, bấm Xuất bản.
4. Trong hộp Xuất bản giao diện này?, bấm Xuất bản.

Từ lúc này, khách vào địa chỉ EcomWeb của cửa hàng được chuyển đến website của bạn, giữ nguyên đường dẫn.

Dùng tên miền riêng

Muốn khách vào website bằng tên miền riêng, trỏ tên miền đó đến máy chủ của bạn, không trỏ đến EcomWeb. Ví dụ, thêm tên miền trong Vercel.

1. Thêm tên miền ở nơi chạy website.
2. Đổi DNS của tên miền theo hướng dẫn của nơi đó.
3. Mở trang của giao diện đã kết nối.
4. Bấm biểu tượng ba chấm ở đầu trang.
5. Chọn Quản lý Self-hosted.
6. Trong thẻ Website đang dùng, bấm biểu tượng cây bút Sửa.
7. Nhập địa chỉ mới vào Địa chỉ trang.
8. Bấm Lưu.

Địa chỉ mới được thêm làm một phiên bản và dùng ngay. Nếu đây là giao diện đang sử dụng, hộp xác nhận yêu cầu bạn bấm Mở trang để kiểm tra website trước, rồi mới bấm được Dùng bản này. Nếu chỉ đổi Tên miền được phép, thay đổi được lưu ngay mà không tạo phiên bản mới.

Câu hỏi thường gặp