Cách sử dụng Travis CI và GitHub cho quy trình phát triển web của bạn Nâng hàng nặng

Tất cả trở nên dễ dàng hơn với sự tích hợp liên tục thông qua Travis CI

Nó phổ biến để hack các ứng dụng cùng nhau trên CodePen khi bạn bắt đầu. Nhưng sẽ có lúc bạn muốn xuất bản các ứng dụng web của riêng mình ra toàn thế giới. Họ có thể là dự án phụ hoặc dự án cho một khách hàng. Một quy trình phát triển tốt sẽ tạo ra một thế giới khác biệt vào thời điểm này.

Chúng tôi sẽ thiết lập một quy trình phát triển bằng các công cụ sau:

  • tạo-phản ứng-ứng dụng
  • kịch bản npm
  • Travis-CI

Chúng tôi kết nối Travis CI và GitHub với nhau. Cuối cùng, chúng tôi sẽ nhận được một huy hiệu đẹp và sáng bóng Giống như cái bên dưới.

Nhưng hơn cả vẻ ngoài, huy hiệu biểu thị một chức năng. Nó là một dấu hiệu của thử nghiệm Travis CI, xây dựng và xuất bản các cam kết của chúng tôi với GitHub. Travis CI chỉ xuất bản nếu các bài kiểm tra vượt qua.

Hãy sẵn sàng để đặt những huy hiệu này trên kho lưu trữ của bạn:

Tôi đã tổ chức toàn bộ quy trình làm việc trong các giai đoạn. Một ngồi nên làm cho từng giai đoạn. Điều đó trong vòng khoảng 50 phút.

Giai đoạn 1: Chạy ứng dụng tạo-phản ứng cục bộ

Chuẩn bị kho git của bạn

Điều đầu tiên là tạo một kho lưu trữ mới trên GitHub. Nếu bạn chưa có tài khoản, bây giờ là thời gian để đăng ký. Kho công cộng là miễn phí. Khi bạn tạo một kho lưu trữ mới, GitHub cho phép bạn tạo các tệp cho .gitignore, giấy phép và README.md.

Nếu bạn bắt đầu với Git lần đầu tiên, bạn có thể đọc cuốn sách miễn phí này trực tuyến. Ngoài ra còn có một phần trợ giúp trên GitHub.

Đây là cách kho lưu trữ mới của chúng tôi sẽ trông như thế nào:

Được rồi, hãy để có được điều đó trên thiết bị đầu cuối của chúng tôi. Bạn có thấy nút màu xanh lá cây sáng trên hình ảnh trên hiển thị Clone hoặc tải xuống. Điều đó sẽ cung cấp cho chúng tôi URL vào kho lưu trữ. Trên thiết bị đầu cuối của bạn, chạy lệnh này:

git clone [email protected]: gỗ thông / phản ứng-liên tục-triển khai.git

Lệnh đó sẽ tải nội dung của kho lưu trữ vào một thư mục mới. Nó đặt tên thư mục giống như kho lưu trữ. Trong trường hợp của chúng tôi, tên thư mục sẽ được phản ứng-liên tục triển khai.

Nếu bạn muốn đảm bảo một liên kết đến kho lưu trữ ban đầu đã sẵn sàng, hãy sử dụng lệnh:

git từ xa -v

Bây giờ chúng tôi đã sẵn sàng đẩy các thay đổi của mình lên GitHub, hãy để cho tôi có được React và chạy.

Lên và chạy với ứng dụng tạo phản ứng

Bắt đầu một dự án phản ứng mới từ đầu có thể mất nhiều thời gian hơn bạn mong đợi. Đặc biệt là khi bạn không sử dụng bất kỳ giàn giáo được xác định trước. Có một số giải pháp mà chúng ta có thể sử dụng để bắt đầu. Tôi đã chọn Tạo ứng dụng chính thức vì tôi đã thử nó trước và bị kẹt với nó. Khi bạn không thể điều khiển các cấu hình của mình, nó sẽ cho bạn một khởi đầu rõ ràng để bạn có thể đạt được mã hóa.

Như tệp README.md lưu trữ hiển thị, bạn chỉ phải cài đặt nó một lần trên toàn cầu. Sau đó, bạn có thể sử dụng nó để giàn giáo bao nhiêu dự án tùy thích.

Để cài đặt nó, gõ:

npm cài đặt -g tạo-phản ứng-ứng dụng

Sau khi cài đặt, bạn có thể chạy nó từ bất kỳ thư mục nào để tạo một ứng dụng mới. Hãy để cho nó tên kho lưu trữ của chúng tôi Tên của chúng tôi:

tạo-phản ứng-ứng dụng phản ứng-liên tục triển khai

Điều đó sẽ không tạo một thư mục mới vì chúng tôi đã có thư mục được tạo bởi Git. Thay vào đó, nó sẽ bắt đầu cài đặt các tập lệnh node_modules và giàn giáo cần thiết trong thư mục hiện có.

Nếu bạn muốn có một ứng dụng mới, bạn có thể sử dụng:

tạo-Reac-app Fancy-app-name

Sau đó, bạn sẽ cần phải tạo một kho lưu trữ Git và kết nối nó với GitHub. Điều đó không quá khó. Bạn có thể sử dụng trang trợ giúp này từ GitHub.

Cài đặt đó đã hoàn thành chưa? Nó không nên mất hơn 5 phút. Tôi mất khoảng 15 phút. Don Hãy để điều đó làm bạn sợ. Trừ khi bạn giống như tôi, và bạn đang sử dụng thẻ dữ liệu 4G 150 mb / giây, cung cấp cho bạn tốc độ tải xuống khoảng 512kbps vào ngày tốt nhất.

Điều tuyệt vời là, việc cài đặt đã chuyển tập tin README.md cũ của chúng tôi sang một bên. Thiết bị đầu cuối hiển thị thông điệp ngọt ngào này:

Bạn đã có một tệp `README.md`, chúng tôi đã đổi tên nó thành` README.old.md`

Thiết bị đầu cuối cũng sẽ cho bạn thấy danh sách khổng lồ các gói trong cấu trúc cây. Điều này có thể trông đáng sợ. Nhưng hầu hết trong số này là phụ thuộc giữa các gói. Họ ở đó để giúp bạn phát triển ứng dụng của bạn. Sản phẩm cuối cùng sẽ chỉ có các tệp JavaScript cần thiết như Reac.js và Reac-dom.js. Chúng tôi sẽ đến đó trong một thời gian.

Còn bây giờ, hãy để thức dậy ứng dụng của chúng tôi. Khi quá trình cài đặt kết thúc,
tạo-Reac-app sẽ cung cấp cho chúng ta một danh sách các lệnh sẽ hữu ích.

Dưới đây là một danh mục để tham khảo:

  • bắt đầu npm
    Khởi động máy chủ phát triển
  • chạy npm xây dựng
    Gói ứng dụng vào các tệp tĩnh để sản xuất
  • kiểm tra npm
    Bắt đầu chạy thử
  • npm chạy đẩy
    Xóa bản dựng phụ thuộc duy nhất khỏi dự án của bạn Xem tại đây
  • npm chạy triển khai
    Để triển khai xây dựng vào nhánh gh-page

Mặc định npm start và npm test các lệnh nút tích hợp được nhận dạng theo mặc định. Bạn cần chạy các tập lệnh khác như xây dựng, đẩy và triển khai bằng cờ chạy thêm:
npm chạy script_name

Chúng tôi thêm một vài chi tiết trong quá trình chúng tôi đi. Bây giờ đã đến lúc tải trang web của chúng tôi trên trình duyệt. Vào thư mục ứng dụng và chạy:

bắt đầu npm

Giống như ma thuật, một tab trình duyệt mới mở ra và bạn thấy một bánh xe React đẹp mắt. Quan điểm phải thách thức bạn xây dựng ứng dụng tốt nhất tiếp theo mà internet sắp chứng kiến.

Vì vậy, đây là những gì chúng ta nhận được:

Đó là một GIF khá gọn gàng (Định dạng trao đổi đồ họa) không phải là nó? Ngoại trừ con trỏ của tôi đến. Tôi đã chụp GIF này bằng một công cụ có tên là Peek. Kiểm tra nó khi bạn cần nó.

Làm tốt! Tôi hy vọng rằng didn mất hơn 45 phút. Nếu bạn đang gặp vấn đề, hãy chú ý đến các thông báo lỗi và cố gắng khắc phục chúng.

Khi bạn đang ở gần điểm của sự thất vọng, hãy đến Stack Overflow để được giúp đỡ. Hoặc để lại câu hỏi của bạn trong các ý kiến ​​dưới đây.

Trước khi chúng tôi xâm nhập vào bất kỳ tệp nào, hãy để nhận được mã đã cam kết và được đẩy đến kho lưu trữ GitHub. Các lệnh này sẽ làm:

tình trạng git
git add --all git commit -m "Giàn giáo ban đầu, đây là thông điệp của riêng bạn"
  • tình trạng git
    Hiển thị danh sách các thay đổi mà chúng tôi đã thực hiện
  • thêm git
    Thêm những thay đổi đó vào một vị trí tạm thời được gọi là giai đoạn trước khi chúng tôi đẩy nó lên đám mây

Nếu bạn chạy lại trạng thái git, nó sẽ báo cáo rằng

Chi nhánh của bạn đi trước 'origin / master' bằng 1 lần xác nhận.
 (sử dụng "git đẩy" để xuất bản các cam kết tại địa phương của bạn)
 Không có gì để cam kết, thư mục làm việc sạch sẽ

Đúng vậy, chúng tôi đã thực hiện và cam kết thay đổi cục bộ. Không có thay đổi không cam kết. Nhưng chúng tôi đang đi trước phiên bản đám mây của kho lưu trữ của chúng tôi. Đã đến lúc xuất bản chúng đến một ngôi nhà an toàn, đó là GitHub.

Tất cả bạn cần chạy là:
git đẩy nguồn gốc

Bạn sẽ nhận được một báo cáo đẹp hiển thị hàm băm như fb74259..045ec7a, đây là tài liệu tham khảo cho cam kết của chúng tôi. Tất nhiên, băm của bạn sẽ khác.

Kiểm tra kho GitHub của bạn. Bạn có ngạc nhiên khi thấy một README.md?Remember dài mà ứng dụng tạo phản ứng đã thay thế README.md nhỏ bé của chúng ta bằng chính nó. Nó rất lớn và hữu ích, vì vậy chúng tôi sẽ giữ nó ngay bây giờ trước khi chúng tôi tự viết.

Giai đoạn 2: Chuyển trang web sang Trang GitHub

Xây dựng trang web tĩnh

Hãy cùng xem qua bản dựng cuối cùng.

Bạn chỉ phải chạy:

chạy npm xây dựng

Hãy chắc chắn rằng bạn đang ở trong thư mục ứng dụng cho tất cả các lệnh. Chúng tôi sẽ nhận được văn bản tốt đẹp này cho chúng tôi thấy những gì đã xảy ra và chúng tôi có thể làm gì khác:

$ npm chạy xây dựng
> Reac [email protected] build / home / weebee / Project / blog_projects / Reac-contin-integration
> xây dựng kịch bản phản ứng

Tạo một bản dựng sản xuất được tối ưu hóa ...
Biên dịch thành công.

Kích thước tệp sau gzip:

  Xây dựng 48,12 KB / tĩnh / js / main.9fdf0e48.js
  Xây dựng 288 B / tĩnh / css / main.cacbacc7.css

Dự án được xây dựng giả sử nó được lưu trữ ở gốc máy chủ.
Để ghi đè lên điều này, chỉ định trang chủ trong gói.json của bạn.
Ví dụ: thêm phần này để xây dựng nó cho Trang GitHub:

  "Trang chủ": "http://myname.github.io/myapp",

Thư mục xây dựng đã sẵn sàng để được triển khai.
Bạn có thể phục vụ nó với một máy chủ tĩnh:

  cài đặt npm -g phục vụ
  phục vụ xây dựng

Lệnh npm run build thực hiện những gì chúng ta yêu cầu. Nó xây dựng ứng dụng của chúng tôi, và tối ưu hóa và thu nhỏ tài sản của chúng tôi. Và nó đặt mọi thứ trong một thư mục gọi là build.

Về phía dưới, đề xuất là cài đặt gói npm phục vụ để khởi động máy chủ cục bộ. Hầu hết thời gian, nếu bạn ở trên Linux, bạn sẽ cài đặt Python. Nó rất dễ dàng để khởi động một máy chủ cục bộ nếu bạn có Python.

Bước vào thư mục xây dựng và khởi động máy chủ, xem các lệnh sau:

xây dựng cd
python -m SimpleHTTPServer

Lệnh Python theo mặc định khởi động máy chủ trên cổng 8000. Vì vậy, http: // localhost: 8000 sẽ phục vụ phiên bản sản xuất của trang web. Nó sử dụng các tài sản từ thư mục xây dựng cục bộ của bạn mà chúng ta vừa tạo.

Nếu điều đó có vẻ tốt, chúng tôi sẽ gửi nó đến các trang GitHub.

Primer trên trang GitHub

Các trang GitHub là giải pháp lưu trữ được cung cấp bởi GitHub cho các kho lưu trữ. Có một vài nơi mà bạn có thể lưu trữ trang web của mình, tất cả trong một kho lưu trữ:

  • Bạn có thể sử dụng nhánh chính (nhánh mặc định) để lưu trữ trang web của mình
    Nếu bạn có index.html, nó sẽ xuất hiện. Nếu không, README.md của bạn sẽ hiển thị.
  • Bạn cũng có thể sử dụng thư mục tài liệu trong nhánh chính để lưu trữ trang web của mình
    Trường hợp sử dụng sẽ là khi bạn có một phần mềm hoặc thư viện được phát triển trên GitHub. Bạn có thể muốn lưu trữ tài liệu cùng trong cùng một kho lưu trữ.
  • Bạn có thể sử dụng nhánh gh-page để lưu trữ trang web của mình

Có một ngoại lệ. Tên kho lưu trữ của bạn không được là .github.io hoặc .github.io

Đây là những cái tên đặc biệt và chúng giới hạn bạn sử dụng nhánh chính.

Khi bạn lưu trữ trang web của mình, bạn có thể tải nó trong các URL sau. Nó phụ thuộc vào việc kho lưu trữ của bạn nằm trong tài khoản của bạn hay tài khoản tổ chức:

https: //  .github.io /  /
https: //  .github.io /  /

Với sự hiểu biết đó, hãy để trang bị cho kho lưu trữ của chúng tôi đi vào hoạt động.

Xuất bản lên các trang GitHub

Ứng dụng README.md mới được cung cấp cho chúng tôi bởi ứng dụng tạo phản ứng có một phần riêng trên các trang GitHub. Có vài điều chúng ta cần làm.

Kiểm tra bổ sung vào tệp pack.json

"trang chủ": "http: //  .github.io / 

Lưu ý: Thông thường, phần cuối cùng hoặc mục trong JSON không cần một dấu phẩy, tất cả các phần khác nên có một dấu phẩy.

Cài đặt gói gh-page

Điều này là dễ dàng. Chỉ cần chạy lệnh sau trong khi bạn đang ở trong thư mục dự án:

cài đặt npm - lưu các trang gh

Cờ --save sẽ thêm các trang gh dưới dạng phụ thuộc vào gói.json. Điều này là để đảm bảo bất kỳ ai khác nhân bản dự án của bạn cũng có thể nhận được nó khi họ chạy cài đặt npm.

Dưới đây là ảnh chụp nhanh của lệnh git diff hiển thị tất cả những gì chúng tôi đã thêm kể từ khi gói.json được tạo.

Triển khai đến chi nhánh gh-page

Hãy để chương trình chạy npm chạy npm. Nó sẽ tự động chạy chương trình trước, để tạo ra bản dựng sản xuất mà chúng tôi đã thấy trước đó. Sau đó, nó sẽ triển khai bản dựng vào kho lưu trữ của chúng tôi dưới một nhánh mới có tên gh-page.

Kiểm tra xem bạn có nhận được trạng thái Xuất bản như là tuyên bố cuối cùng không. Nếu vậy, bạn đã triển khai thành công bản dựng sản xuất cho GitHub. Đây là đầu ra:

Chọn nhánh gh-page sẽ được xuất bản

Hãy để đối đầu với kho lưu trữ GitHub và xuất bản trang web của chúng tôi. Mở kho lưu trữ và đi đến tab cài đặt ở trên cùng. Có vẻ như hình ảnh này dưới đây, chờ một chút! GitHub đã tự động xuất bản chi nhánh gh-page. Không còn gì để làm. Nó cũng hiển thị URL mà chúng tôi có thể truy cập trang web.

Tiêu đề phụ ở trên thực sự nên nói Không làm gì cả. Nó đã hoàn thành và sẵn sàng cho chúng ta tiêu thụ.

Lưu ý: URL hiển thị cho kho lưu trữ của tôi có thể khiến bạn hiểu lầm. Điều đó bởi vì tôi đã tạo ra kho lưu trữ này dưới một tổ chức có tên là PineBoat, đó là blog của tôi. GitHub đặt cái này dưới tên miền tùy chỉnh của tôi, đó là thứ tôi mong đợi khi tôi thử nó. Bạn sẽ khác.

Càng xa càng tốt. Nếu bạn đã có kinh nghiệm trước đó trong các gói Git và Node, bạn sẽ không gặp khó khăn gì cho đến nay. Trên thực tế, README.md mặc định là đủ để giúp tôi đến nay. Nếu bạn chưa có kinh nghiệm, tôi hy vọng bạn thích chuyến đi.

Nhưng chúng tôi đang khao khát một quy trình triển khai liên tục. Chúng tôi đang bắt đầu điều hướng một số vùng biển chưa được khám phá. Người ta sẽ tranh luận không có gì là chưa được khám phá trên Internet. Tôi đồng ý, nhưng tạo bản đồ của riêng tôi.

Giai đoạn 3: Triển khai liên tục

Đây là nơi chúng tôi mang các bot để thực hiện hầu hết các triển khai mà chúng tôi đã làm trong giai đoạn 2.

Dây trong Travis CI để xây dựng tự động

Hãy cùng với Travis CI để triển khai cho chúng tôi. Không có hại trong việc xây dựng và triển khai trang web của riêng bạn. Như chúng ta đã thấy, tất cả chỉ mất vài phút nữa là khoảng thời gian quý giá của chúng ta.

Tuy nhiên, khi bạn chạy vào các dự án quy mô lớn hơn, hãy để các bot đáng tin cậy thực hiện một số công việc. Travis CI là một trong những dịch vụ như vậy.

Chúng tôi có thể tận dụng Travis CI để xây dựng và triển khai bất cứ khi nào chúng tôi cam kết mã của mình với kho lưu trữ.

Đăng ký để Travis CI

Sẽ thật khó chịu nếu tôi bắt đầu với mạng nếu bạn có tài khoản GitHub ngay bây giờ. Tôi chắc chắn bạn có một cái bây giờ và chúng ta có thể sử dụng nó để đăng ký Travis CI.

Kết nối với kho lưu trữ GitHub

Coi chừng các quyền. Nếu kho lưu trữ của bạn không được liệt kê, nhấp vào nút đồng bộ hóa và làm mới trang. Tôi đã phải cấp phép cho tổ chức của Pine PineBoat, trước khi tôi có thể nhìn thấy kho lưu trữ.

Travis CI chỉ cho bạn các bước. Flick chuyển sang kho lưu trữ của bạn để kết nối nó.

Nhấp vào tên kho lưu trữ để mở nó lên. Nó sẽ hiển thị trạng thái xây dựng là không xác định và ghi chú lớn hơn cho biết Không có bản dựng nào cho kho lưu trữ này.

Không lâu đâu. Hãy để thay đổi nó.

Thêm .travis.yml vào kho lưu trữ

Đây là .travis.yml cần được thêm vào. Có một cái nhìn, và ở lại với tôi trong khi tôi làm sáng tỏ một số câu hỏi bạn có thể có.

ngôn ngữ: node_js
nút_js:
 - "nút"
after_success:
 - git config - người dùng toàn cầu.name "vijayabharathi"
 - git config --global user.email "[email được bảo vệ]"
 - git từ xa nguồn gốc rm
 - git từ xa thêm nguồn gốc https: // vijayabharathib: $ {GH_TOKEN} @ github.com / gỗ thông / phản ứng-liên tục-triển khai.git
 - npm chạy triển khai

Hãy cẩn thận với nguồn gốc git từ xa, nó có một dòng dài. Cú pháp YAML hơi khác so với JSON. Trang này có thể giúp. Bây giờ nó có thời gian để phá vỡ nó. Bạn có thể đã tìm ra hầu hết các tin nhắn.

Đây là tiếng Anh đơn giản:

  • Đây là một dự án nút. Nhận phiên bản nút mới nhất
  • Vì Travis chạy thử nghiệm npm theo mặc định, chúng tôi yêu cầu nó thực hiện mọi thứ sau khi thử nghiệm thành công
  • Thêm tên người dùng và email Git của bạn
  • Sau đó thêm git nguồn gốc từ xa cho kho lưu trữ
    Sử dụng tên người dùng của bạn và GH_TOKEN được tạo làm thông tin đăng nhập
  • Cuối cùng, chạy lệnh triển khai npm run
    Nếu bạn nhớ lại, điều này sẽ chạy npm chạy dự đoán trước khi chạy npm chạy triển khai

Cam kết và xem Travis CI xây dựng

Giữ trang kho lưu trữ Travis CI của bạn mở. Trên thiết bị đầu cuối của bạn thêm các thay đổi, cam kết và đẩy chúng vào GitHub.

Trong trường hợp bạn cần một lời nhắc, đây là danh sách các lệnh:

git thêm --all
git commit -m "thêm cấu hình .travis.yml để xây dựng tự động" git push origin master

Nếu bạn chuyển sang trang Travis CI, bạn sẽ thấy trang trở nên sống động sau khi git đẩy kết thúc hoặc trong vài giây. Quá trình xây dựng bắt đầu tự động và bạn sẽ biết nếu nó thành công.

Đây là trang Travis CI của tôi hiển thị trạng thái màu xanh lá cây đẹp.

Nhật ký hiển thị là không ít hơn 2500 dòng. Tôi vui mừng Travis-CI chỉ hiển thị những gì chúng ta cần xem.

Một chỉ dẫn rõ ràng về các bước tiếp theo như được hiển thị bên dưới trong hình ảnh:

Kiểm tra tại chỗ, chúng tôi đã thực sự thành công?

Đây là nơi kiểm tra tự động chạy trên sản xuất có thể có ích.

Nhưng đó là một ngày khác. Selenium WebDriver có thể đợi cho đến khi chúng tôi hoàn thành việc nối dây này. Hãy để thủ công kiểm tra xem Travis CI có thực sự xuất bản lên các trang GitHub không.

Một thử nghiệm khác, lần này với những thay đổi về mã

Lần trước, chúng tôi không thể thấy bất kỳ sự khác biệt nào trong ứng dụng của mình sau khi triển khai. Điều đó bởi vì chúng tôi đã làm được. Vì vậy, không có cách nào để biết liệu việc xây dựng có thành công hay không. Bạn có thể tải nhánh gh-page và xem xét các cam kết, nhưng tôi lạc đề.

Bây giờ, hãy để Lừa thực hiện một số thay đổi nhỏ. Nó thời gian để đưa bánh xe React trở lại đúng lúc.

Chúng tôi chỉ thực hiện hai thay đổi.

Trong tệp src / App.css, có một phần dành cho hoạt hình có tên @keyframes App-logo-spin. Thay đổi 360deg thành -360deg. Điều này là để quay bánh xe ngược chiều kim đồng hồ.

Tải tệp src / logo.svg và thay đổi màu tô từ # 61DAFB thành # DA61FB. Nếu máy chủ của bạn đang chạy qua npm start, bạn đã có thể thấy một bánh xe màu tím chạy ngược chiều kim đồng hồ. Nếu không, hãy thêm các thay đổi vào ngăn chứa, cam kết và đẩy chúng vào kho lưu trữ. Xem nếu quá trình xây dựng thành công trong Travis-CI và sau đó đi đến trang Github của bạn.

Tải your_user_name.github.io/reposeective_name. Bạn sẽ thấy bánh xe màu tím thay vì màu xanh.

Than ôi, tôi không thấy bánh xe màu tím đó. Tôi vẫn thấy màu xanh mặc định.

Sửa lỗi GH_TOKEN bị thiếu

Mặc dù Travis CI báo cáo rằng tất cả đều ổn, nhưng nó thì không. Nếu bạn mở chi nhánh gh-page, bạn sẽ thấy cam kết ban đầu mà chúng tôi đã thực hiện từ thiết bị đầu cuối cục bộ. Không có cam kết khác. Điều đó có nghĩa là, các lệnh after_success không thành công như vậy.

Nếu bạn mở rộng phần triển khai chạy npm trong nhật ký xây dựng Travis, bạn sẽ thấy một số lỗi xác thực. Điều đó vì chúng tôi chưa cho phép Travis CI viết vào kho lưu trữ của chúng tôi.

Bạn có thể tạo mã thông báo mới từ trang Mã thông báo truy cập cá nhân từ GitHub.com. Hãy nhớ cung cấp quyền truy cập vào kho lưu trữ công cộng một mình. Chỉ cần một đánh dấu vào công khai sẽ làm. Don lồng bỏ lỡ điều này. Khi bạn tạo mã thông báo, hãy sao chép nó. GitHub cảnh báo đúng rằng bạn sẽ không thể nhìn thấy nó một lần nữa.

Đi qua Travis CI, nhấp vào Tùy chọn khác cho kho lưu trữ của bạn và chọn cài đặt. Nó hiển thị một số phần, nhưng Biến môi trường là phần cần tìm.

Đặt tên mã thông báo là GH_TOKEN và qua mã thông báo dưới trường giá trị. Nhấp vào thêm. Không bật giá trị Hiển thị trong nhật ký vì mọi người có thể hiển thị nếu bạn gửi nhật ký ra. Mã thông báo tương đương với mật khẩu của bạn.

Rằng nó, bây giờ Travis-CI có thể ghi vào kho lưu trữ của chúng tôi.

Quay trở lại tab Hiện tại của kho lưu trữ và nhấp vào Khởi động lại bản dựng. Khi quá trình xây dựng kết thúc, bạn có thể kiểm tra nhật ký và kiểm tra nhánh gh-page trên GitHub. Bạn sẽ thấy một cam kết mới.

Chúc mừng! Đó là triển khai tự động đầu tiên của chúng tôi. Làm thế nào về trang web github.io? Không có số lượng làm mới sẽ mang lại bánh xe màu tím rất cần thiết. Don mệnh mất hy vọng chưa.

Yêu cầu nhân viên phục vụ nghỉ ngơi

Vẫn là bánh xe đang chảy máu xanh. Nhưng nhánh gh-page trong kho lưu trữ cho thấy một cam kết thứ hai. Hãy để cùng so sánh index.html trên kho lưu trữ và trên nguồn trang web. Họ đang chỉ vào các tệp CSS và JavaScript khác nhau. Hậu tố băm là đầu mối của chúng tôi.

Đây dường như là kết quả của nhân viên dịch vụ JavaScript tràn đầy năng lượng. Nó đã lưu trữ trang để sử dụng ngoại tuyến. Nhưng kết luận này cần nhiều nghiên cứu hơn. Trong lúc này, hãy để Lặn chỉ dừng nhân viên phục vụ và xóa bộ nhớ.

Nếu bạn đang sử dụng Chrome, Công cụ dành cho nhà phát triển có thể được truy cập từ menu hoặc bằng cách nhấn F12. Tab Ứng dụng trên Chrome DevTools có phần Clear Storage. Kiểm tra tất cả các mục và cuối cùng nhấp vào dữ liệu trang web rõ ràng đó.

Làm mới và bùng nổ! Đây là bánh xe ngược của chúng tôi trong màu tím sáng. Bây giờ nó là thời gian để ăn mừng.

Lưu ý: phải có cách tốt hơn để tự động dọn dẹp bộ lưu trữ này. Sẽ là một nỗi đau nếu chúng ta phải dừng lại và dọn dẹp nhân viên phục vụ và lưu trữ mỗi lần để có được những thay đổi trực tuyến. Đó là một chủ đề để nghiên cứu thêm.

Giai đoạn 4: Huy hiệu danh dự từ Travis CI

Có một nhiệm vụ cuối cùng trước mặt chúng tôi. Đó là để có được một huy hiệu trạng thái xây dựng Travis CI sáng bóng qua tệp kho READ README.md của chúng tôi.

Mở Travis CI và nhấp vào build: qua huy hiệu. Nó sẽ hiển thị một hộp thoại với các tùy chọn để chuyển hình ảnh. Để lại chi nhánh là chủ. Chọn Markdown thay vì URL hình ảnh. Sao chép văn bản bạn được cung cấp.

Dán nó vào README.old.md, được tạo cho chúng tôi bởi ứng dụng tạo-phản ứng trước đó. Viết nội dung của riêng bạn.

Bạn có thể xóa README.md mặc định khỏi kho lưu trữ và đổi tên README.old.md thành README.md.

Thêm các thay đổi để dàn dựng Git, cam kết và đẩy lên đám mây. Bây giờ các kho lưu trữ sẽ hiển thị các lô bạn luôn muốn. Đây là URL hiển thị cho dự án thú cưng của chúng tôi.

https://travis-ci.org/pineboat/react-continupt-deployment.svg?branch=master

Bạn có thể thêm url đó vào README.md ở trên cùng. Đây là hình ảnh:

Chúng tôi đã làm xong ở đây! Thời gian để ăn mừng.

Tôi muốn để lại cho bạn một câu hỏi. Nếu bạn đang làm việc trong một nhóm lớn sử dụng quy trình công việc tương tự, những thách thức bạn gặp phải là gì và bạn sẽ giải quyết chúng như thế nào? Viết bình luận và cho tôi biết.

Cảm ơn bạn rất nhiều vì đã đọc. Tôi hy vọng bạn tìm thấy nó hữu ích.

Điều này ban đầu được xuất bản tại pineboat.in.

Vỗ tay cho thấy bạn đánh giá cao bài viết này như thế nào.