Xin chào! Tên tôi là Dima, tôi là trưởng nhóm kỹ thuật của nhóm SysOps tại Wrike. Trong bài viết này, tôi sẽ cho bạn biết cách tạo một trang web gần gũi với người dùng nhất có thể trong 10 phút và 5 đô la một tháng và tự động hóa việc triển khai trang web đó. Bài viết hầu như không liên quan gì đến những vấn đề mà chúng tôi giải quyết trong nhóm của mình. Đây đúng hơn là kinh nghiệm và ấn tượng cá nhân của tôi khi làm quen với một công nghệ mới đối với tôi. Tôi đã cố gắng mô tả các bước càng chi tiết càng tốt để hướng dẫn sẽ hữu ích cho những người có trải nghiệm khác nhau. Tôi hy vọng bạn sẽ tận hưởng. Đi!
Vì vậy, có lẽ bạn đã tìm được một cách đơn giản và rẻ tiền để lưu trữ một trang web. Thậm chí có thể miễn phí, như được mô tả trong này.
Nhưng đột nhiên bạn vẫn cảm thấy nhàm chán và muốn chạm tay vào thế giới công nghệ mới đầy dũng cảm? Giả sử bạn đang nghĩ đến việc tự động triển khai và muốn tăng tốc trang web của mình nhiều nhất có thể? Trong bài viết này chúng tôi sẽ sử dụng, nhưng đây là tùy chọn.
Chúng tôi sử dụng Gitlab CI/CD để tự động hóa, nhưng còn khả năng tăng tốc thì sao? Hãy triển khai trang web trực tiếp lên Cloudflare bằng cách sử dụng.
Những gì cần thiết để bắt đầu:
-
Gitlab (của riêng bạn hoặc )
-
trên Cloudflare
-
Cài đặt
Phần 1: Cài đặt Hugo
Nếu bạn đã cài đặt Hugo hoặc nếu bạn thích một trình tạo trang tĩnh khác (hoặc hoàn toàn không sử dụng một trình tạo trang tĩnh nào) thì bạn có thể bỏ qua phần này.
-
Tải xuống Hugo từ
-
Chúng tôi đặt tệp thực thi Hugo theo một trong những tệp được xác định trong cách
-
Tạo một trang web mới:
hugo new site blog.example.com -
Thay đổi thư mục hiện tại sang thư mục mới tạo:
cd blog.example.com -
Chọn chủ đề thiết kế ( hay bất cứ cái gì)
-
Hãy tạo bài viết đầu tiên:
hugo new posts/my-amazing-post.md -
Thêm nội dung vào file đã tạo: nội dung/bài đăng/my-amazing-post.md.
Khi mọi thứ đã hoàn tất, hãy thay đổi giá trị dự thảo thành sai -
Tạo tập tin tĩnh:
hugo -D
Bây giờ trang tĩnh của chúng tôi nằm trong một thư mục ./công cộng và sẵn sàng cho lần triển khai thủ công đầu tiên của bạn.
Phần 2: Thiết lập Cloudflare
Bây giờ hãy xem thiết lập ban đầu của Cloudflare. Giả sử rằng chúng ta đã có miền cho trang web. Hãy lấy làm ví dụ blog.example.com.
Bước 1: Tạo mục nhập DNS
Đầu tiên, chọn tên miền của chúng tôi và sau đó là mục menu DNS. Chúng tôi tạo một bản ghi blog A và chỉ ra một số IP hư cấu cho nó (đây là địa chỉ chính thức, nhưng họ có thể làm nó đẹp hơn một chút).
Bước 2: Mã thông báo Cloudflare
-
Hồ Sơ -> Mã thông báo API tab-> Tạo mã thông báo -> Tạo mã thông báo tùy chỉnh
Tại đây, bạn sẽ cần giới hạn mã thông báo ở các tài khoản và vùng, nhưng hãy để lại tùy chọn Chỉnh sửa cho các quyền được liệt kê trong ảnh.
Lưu mã thông báo cho tương lai, chúng tôi sẽ cần nó trong phần thứ ba.
Bước 3: Lấy Accountid và Zoneid
miền → Giới thiệu chung → [thanh bên phải]
Đây là của tôi, đừng sử dụng chúng :)
Lưu chúng bên cạnh mã thông báo, chúng tôi cũng sẽ cần chúng trong phần thứ ba.
Bước 4: Kích hoạt Công nhân
miền → Người lao động → Công nhân quản lý
Chúng tôi chọn một tên duy nhất và mức thuế Công nhân → Không giới hạn ($5 mỗi tháng hôm nay). Nếu muốn, sau này bạn có thể nâng cấp lên phiên bản miễn phí.
Phần 3: Triển khai lần đầu (triển khai thủ công)
Tôi đã triển khai thủ công lần đầu tiên để tìm hiểu điều gì đang thực sự diễn ra ở đó. Mặc dù tất cả điều này có thể được thực hiện đơn giản hơn:
-
Cài đặt wrangler:
npm i @cloudflare/wrangler -g -
Hãy đi đến thư mục blog của chúng tôi:
cd blog.example.com -
Khởi chạy wrangler:
wrangler init — site hugo-worker -
Tạo cấu hình cho wrangler (nhập mã thông báo khi được hỏi):
wrangler config
Bây giờ hãy thử thực hiện các thay đổi đối với tệp vừa tạo wrangler.toml ( danh sách đầy đủ các cài đặt có thể):
-
Chỉ định Accountid và Zoneid
-
Chúng tôi thay đổi tuyến đường đến một cái gì đó như *blog.example.com/*
-
Chỉ định sai cho công nhândev
-
Thay đổi nhóm thành ./public (hoặc nơi đặt trang web tĩnh của bạn)
-
Nếu bạn có nhiều tên miền trong đường dẫn thì bạn nên sửa đường dẫn trong tập lệnh đang hoạt động: trang web công nhân/index.js (xem chức năng xử lýsự kiện)
Tuyệt vời, đã đến lúc triển khai trang web bằng cách sử dụng nhóm wrangler publish.
Phần 4: Tự động hóa triển khai
Hướng dẫn này được viết cho Gitlab, nhưng nó nắm bắt được bản chất và sự dễ dàng triển khai tự động nói chung.
Bước 1: Tạo và cấu hình dự án của chúng tôi
-
Tạo một dự án GitLab mới và tải lên trang web: thư mục blog.example.com với tất cả nội dung phải được đặt trong thư mục gốc của dự án
-
Chúng tôi thiết lập Biến đổi CFAPITOKEN ở đây: Cài đặt → CI / CD → Biến
Bước 2: Tạo tệp .gitlab-ci.yml và chạy lần triển khai đầu tiên
Tạo một tập tin .gitlab-ci.yml trong thư mục gốc có nội dung sau:
stages:
- build
- deploy
build:
image: monachus/hugo
stage: build
variables:
GIT_SUBMODULE_STRATEGY: recursive
script:
- cd blog.example.com/
- hugo
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #
deploy:
image: timbru31/ruby-node:2.3
stage: deploy
script:
- wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- cd blog.example.com/
- ../dist/wrangler publish
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #Chúng tôi khởi chạy triển khai đầu tiên theo cách thủ công (CI/CD → Đường ống → Chạy đường ống) hoặc bằng cách cam kết với nhánh chính. Thì đấy!
Kết luận
Chà, có lẽ tôi đã nói nhẹ đi một chút và toàn bộ quá trình chỉ mất hơn mười phút. Nhưng bây giờ bạn có một trang web nhanh chóng với khả năng triển khai tự động và một số ý tưởng mới về những việc khác mà bạn có thể làm với Công nhân.
Nguồn: www.habr.com