Xây Dựng Minigame Aavegotchi Full-stack Phần 3: Triển Khai Game

16 min readAug 16, 2021

Trong phần đầu của bài hướng dẫn này, chúng ta đã tạo ra lối chơi bằng cách sử dụng Phaser 3, sau đó ở phần 2 chúng ta đã tạo ra một server để xác minh điểm gửi đến bảng xếp hạng.

Và điều chúng ta cần làm bây giờ là triển khai nó! Tuy nhiên, do bản chất của ứng dụng, việc này không đơn giản như là gửi file HTML lên các dịch vụ web hosting.

Thay vào đó, máy chủ backend và ứng dụng front end của chúng ta có những yêu cầu khác cần được host và truy cập trên World Wide Web, và do đó cần có những giải pháp khác.

Bạn cần phải theo dõi bài đọc trước bằng cách tạo ra bản sao kết quả của bài học trước đó.

Kết quả

Ở cuối hướng dẫn này, trò chơi của bạn sẽ có thể tiếp cận được với cộng đồng Aavegotchi để chơi và tranh đấu!

Chúng tôi sẽ sử dụng Google Clouds Compute Engine để lưu trữ và triển khai máy chủ web-socket của mình trên một Máy ảo. Sau đó, chúng tôi sẽ sử dụng Firebase để lưu trữ ứng dụng React của mình và đảm bảo rằng cả Máy chủ và Giao diện người dùng có thể giao tiếp với nhau.

Trừ khi bạn đã mã hóa nó để hoạt động khác, bạn sẽ không thể chơi trò chơi mà không sở hữu Aavegotchi. Bạn có thể mua một bé ở đây hoặc bạn có thể xóa chế độ development cần thiết trong app/src/pages/Home để cho phép mọi người có thể chọn Sử dụng Gotchi mặc định mà không yêu cầu sở hữu Aavegotchi.

Bước 1) Cài đặt máy ảo

Trước tiên, bạn sẽ cần thiết lập Google Cloud Platform, bạn có thể sử dụng mã giới thiệu của tôi để nhận điểm tín dụng $ 50, quá đủ cho dự án này.

Nếu bạn có tài khoản Google, hãy chuyển đến Google Clouds Console và ở trên cùng bên phải, chọn CREATE PROJECT.

Sau đó hãy đặt bất kỳ cái tên nào mà bạn muốn.

Sẽ mất vài giây để tạo dự án nhưng một khi đã xong thì bạn sẽ thấy nó trong dashboard của mình.

Trong side menu, hãy tìm Computer Engine -> VN Instances.

Bật API Compute Engine.

Sau đó chọn Create Instance.

Đặt tên, chọn khu vực của bạn.

Đối với cấu hình máy, hãy chọn những gì phù hợp nhất với bạn tùy thuộc vào ứng dụng của bạn. Máy chủ Flappigotchis rất đơn giản nên tôi sẽ chọn máy nhỏ nhất của dòng E2.

Sau đó, đối với Tường lửa, hãy chọn cho phép lưu lượng truy cập HTTP và HTTPS để trình duyệt có thể kết nối.

Sau đó bấm tạo. Sẽ mất một phút hoặc lâu hơn để thiết lập.

Bước 2) Thiết lập tên miền

Sau đó, chúng tôi sẽ thiết lập TLS (Transport Layer Security) cho máy chủ của mình. Với điều đó, chúng ta sẽ cần một tên miền.

Nếu bạn đã có sẵn một cái thì thật tuyệt, nếu không, bạn có thể mua một cái từ Google Domains.

Khi bạn đã có tên miền của mình. Quay lại các phiên bản máy ảo của bạn và sao chép IP bên ngoài vào khay nhớ tạm của bạn.

Giờ hãy chuyển đến side menu, kéo xuống, và ở dưới Networking, hãy hcojn Network services -> Cloud DNS.

Bật API nếu bạn chưa bật, sau đó tạo Zone.

Đặt tên miền và tên DNS cho tên miền. Hãy đảm bảo rằng DNSSEC đã tắt.

Sau khi nhấp vào tạo, một vùng sẽ được điền với các bản ghi NS và SOA.

Để trỏ tên miền đã đăng ký của bạn tới địa chỉ IP của máy chủ lưu trữ, bạn phải thiết lập bản ghi A cho vùng của mình.

Để làm điều này:

1. Nhấp vào Add Record Set
2. Chọn A từ menu Resource Record Type
3. Trong tên DNS đặt máy chủ
4. Dưới Địa chỉ IPv4, hãy dán địa chỉ External IP từ instance của bạn
5. Nhấp create
Sẽ mất một vài phút để trở nó hoạt động.

Để cập nhật máy chủ định danh trong các miền của Google:

1. Đi tới Google Domains
2. Nhấp vào miền bạn đã thiết lập trước đó
3. Nhấp vào DNS từ menu bên trái
4. Ở trên cùng, nhấp vào Tùy chỉnh
5. Sao chép lần lượt tất cả 4 bản ghi NS từ trang Chi tiết vùng và dán chúng vào đầu vào Máy chủ định danh.
6. Nhấp vào để lưu
7. Nhấp vào chuyển sang các cài đặt này

Để xác minh các thay đổi của bạn đã thành công khi thiết bị đầu cuối chạy
dig + trace server.example.com trong đó example.com là miền bạn đã đăng ký.

Bạn sẽ thấy ở cuối đầu ra IP_Address của máy ảo của bạn

server.example.com. 300 IN A 34.105.146.34 ;; Received 68 bytes from 216.239.36.109#53(ns-cloud-d3.googledomains.com) in 51 ms

Bước 3) Cài đặt các phụ thuộc vào Máy ảo

Bây giờ chúng ta cần chuẩn bị máy ảo. Để thực hiện việc này, chúng ta sử dụng Cloud Shell để truy cập vào thiết bị đầu cuối của máy.

Để đăng nhập vào máy ảo, trong phần chạy đầu cuối Cloud shell (thay thế vùng và tên bằng vùng và tên của phiên bản VM của bạn):

gcloud compute ssh --zone [zone] [name]

Phần còn lại của hướng dẫn giả định rằng bản phân phối linux mà máy ảo sử dụng là Debian. Để kiểm tra xem bạn đang chạy bản phân phối nào, trong cloud shell của bạn, hãy gọi lsb_release -a. Nếu nó khác, các khái niệm sẽ vẫn giống nhau, nó chỉ là một số cú pháp có thể khác hoặc không.

Hiện tại, máy ảo của chúng ta rất khó. Chúng ta sẽ phải cài đặt một loạt các phụ thuộc để làm cho nó có thể sao chép và chạy ứng dụng của chúng mình.

Đây sẽ là

- Git — Vì vậy, chúng tôi có thể sao chép dự án của mình
- NGINX — Để ủy quyền các yêu cầu web tới máy node
- Certbot — Để cung cấp chứng chỉ TLS
- UFW — giao diện người dùng thân thiện để quản lý các quy tắc tường lửa iptables.

Để cài đặt chúng, trong đám mây shell của bạn, hãy chạy:

sudo apt-get install git nginx certbot python-certbot-nginx ufw

Tiếp theo chúng ta sẽ cài đặt Node. Đối với điều này, chúng ta cần cài đặt kho lưu trữ Node mới nhất mà bạn có thể tìm thấy ở đây, đối với mình, bản phát hành ổn định mới nhất là Node.js v16.x nên mình sẽ chạy:

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

Sau khi cài đặt của nó, chạy:

sudo apt-get install -y nodejs

Để cài đặt NodeJS và npm.

Điều cuối cùng chúng ta sẽ cần cài đặt là ts-node do máy chủ của chúng ta được viết bằng typecript, vì chúng ta đã tải xuống npm. Lệnh này đơn giản như chạy:

Để cài đặt NodeJS và npm.

sudo npm install -g ts-node

Bước 4) Định cấu hình NGINX

Đầu tiên, chúng ta phải cấu hình NGINX để nó có thể gửi các yêu cầu proxy đến máy chủ Node. Để thực hiện việc này, trong thiết bị đầu cuối Cloud Shell, hãy tạo một tệp mới sudo nano /etc/nginx/sites-available/server.[domainname].com và dán vào bên trong nó (thay thế tên miền bằng tên miền bạn đã thiết lập trước đó):

server {
    listen 80;
    listen [::]:80;
    root /var/www/html;
    server_name server.[domainname].com; 
}

Nhấn CONTROL + X để lưu các thay đổi, sau đó nhấn Y để xác nhận, sau đó ENTER để thoát.

Bật tệp cấu hình bằng cách chạy:

sudo ln -s /etc/nginx/sites-available/server.[domainname].com  /etc/nginx/sites-enabled/

Sau đó, vì bạn đã chỉnh sửa cấu hình, hãy khởi động lại NGINX bằng cách chạy:

sudo systemctl restart nginx

Sau đó, bạn có thể kiểm tra trạng thái NGINX bằng cách chạy:

sudo systemctl status nginx

Bước 5) Thiết lập tường lửa

Vì chúng tôi đã cài đặt UFW (Tường lửa không phức tạp), bước này đơn giản như chạy

sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https

và sau đó kích hoạt nó bằng cách sử dụng

sudo ufw enable

Cuối cùng, chúng tôi có thể kiểm tra xem các quy tắc đã được định cấu hình đúng cách hay chưa bằng cách chạy:

sudo ufw status

Bạn hy vọng sẽ nhận được phản hồi giống như sau:

Status: active

To Action From -- ------ ---- 22/tcp ALLOW Anywhere 80/tcp ALLOW Anywhere 443/tcp ALLOW Anywhere 22/tcp (v6) ALLOW Anywhere (v6) 80/tcp (v6) ALLOW Anywhere (v6) 443/tcp (v6) ALLOW Anywhere (v6)

Bước 6) Cấp phép chứng chỉ TLS

Bây giờ chúng tôi đã thiết lập NGINX và Tường lửa, chúng tôi có thể chạy certbot để tạo chứng chỉ HTTPS và định cấu hình phần còn lại của NGINX của chúng tôi.

Trong thiết bị đầu cuối đám mây của bạn, hãy chạy

sudo certbot --nginx

Nhập email của bạn, đồng ý với các điều khoản dịch vụ, chọn xem bạn có muốn chia sẻ thông tin hay không.
Nhập miền của ứng dụng bao gồm miền phụ.
Lựa chọn cuối cùng là chúng ta có muốn chuyển hướng lưu lượng HTTP sang HTTPS hay không, chúng ta chọn tùy chọn 2.

Chứng chỉ cá nhân và chuỗi của bạn bây giờ sẽ được lưu vào máy ảo của bạn.

Bây giờ, tất cả những gì chúng ta cần làm là thêm một proxy ngược vào
tệp nginx / sites-available / server. [domainname] .com, vì vậy hãy mở lại bằng cách sử dụng:

sudo nano /etc/nginx/sites-available/server.[domainname].com

ở cuối đối tượng máy chủ trên cùng, hãy thêm vị trí:

server {
    ...
    location / {
        # we're actually going to proxy all requests to
        # a Nodejs backend

        proxy_pass http://localhost:8080/;

        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;

        proxy_set_header Connection 'upgrade';

        proxy_set_header Host $host;

        proxy_cache_bypass $http_upgrade;

    }
}
server {
    ...
}

Bước 7) Chuẩn bị ứng dụng để triển khai

Chúng tôi có mọi thứ chúng tôi cần, bây giờ chúng tôi có thể chuẩn bị ứng dụng của mình để triển khai cả giao diện người dùng và phụ trợ.

Điều đầu tiên chúng tôi muốn làm là cho ứng dụng của mình biết url nào cần nhắm mục tiêu khi khởi chạy socket.io.

Đối với điều này, chúng tôi có thể sử dụng .env và các quy trình để nhắm mục tiêu các biến tạo tùy thuộc vào việc ứng dụng được chạy trong quá trình phát triển hay sản xuất.

Nếu bạn đang tiếp tục từ hướng dẫn trước, trong thư mục ứng dụng, bạn nên có tệp .env.development trong thư mục ứng dụng. Những gì bạn nên làm là tạo một tệp mới trong thư mục ứng dụng có tên .env.production và sao chép tất cả các biến firebase vì chúng sẽ giống nhau trong cả quá trình phát triển và sản xuất.

Trong .env.development, hãy tạo một biến mới được gọi là REACT_APP_SERVER và gán cho nó một giá trị url của máy chủ của bạn khi chạy trên máy chủ cục bộ. Nó sẽ giống như thế này.

// app/.env.development
...

REACT_APP_COLLECTION_NAME="test"
REACT_APP_SERVER_PORT="http://localhost:8080"

Bây giờ trong .env.production, chúng tôi thêm hai biến khác nhau cho COLLECTION_NAME và SERVER_PORT.

Tên bộ sưu tập phải là tên của Cơ sở dữ liệu mà chúng tôi muốn ứng dụng của mình nhắm mục tiêu trên chế độ sản xuất, do đó, nó phải khác với tên được sử dụng trong quá trình phát triển.

SERVER_PORT phải là url của miền máy chủ của chúng tôi. Theo mặc định, cổng này sẽ kết nối với cổng 443 trỏ đến thiết lập NGINX của chúng tôi, cổng này sẽ mã hóa yêu cầu và kết nối với cổng 8080 trên máy ảo của chúng tôi, nơi máy chủ ổ cắm web của chúng tôi sẽ lắng nghe.

// app/.env.production

...

REACT_APP_COLLECTION_NAME="highscores"
REACT_APP_SERVER_PORT="https://server.[domainname].com"

Trong app / src / game / main.tsx, bạn sẽ thấy biến .env của chúng tôi đã được sử dụng để khởi chạy socket, vì vậy không cần thực hiện thêm ở đây.

Đang chuẩn bị máy chủ
Đối với máy chủ, chúng tôi cũng sẽ muốn tạo một số biến .env cho tên của các Bộ sưu tập mà chúng tôi đã đặt trước đó. Vì vậy, hãy tạo một .env.development và .env.production khác và bên trong đặt các biến cho tên bộ sưu tập:

// server/.env.development

DB_COLLECTION="test"// server/.env.production

DB_COLLECTION="highscores"

REACT_APP là không cần thiết vì máy chủ không phải là ứng dụng React.

Sau đó, trong server.ts thay thế tên bộ sưu tập bằng process.env.DB_COLLECTION

// server/server.ts
...

const submitScore = async ({tokenId, score, name}: ScoreSubmission) => {
 const collection = db.collection(process.env.DB_COLLECTION);
 const ref = collection.doc(tokenId);
 ...

Bây giờ hãy chạy ứng dụng cục bộ và đảm bảo mọi thứ vẫn hoạt động chính xác.

Bước 8) Triển khai giao diện người dùng

Để lưu trữ giao diện người dùng, ứng dụng của bạn có thể thoải mái sử dụng bất kỳ dịch vụ lưu trữ nào. Tôi sẽ sử dụng lưu trữ firebase hoàn toàn do cơ sở dữ liệu của tôi nằm trên firebase và chương trình phụ trợ của tôi được lưu trữ trên Google Cloud.

Để bắt đầu, hãy truy cập tài liệu Firebase CLI để tìm hiểu cách cài đặt Firebase CLI.

Sau khi bạn đã cài đặt nó, hãy bắt đầu lưu trữ cho ứng dụng bằng cách vào thư mục ứng dụng trong thiết bị đầu cuối của bạn và chạy:

firebase init hosting

Chọn Sử dụng một dự án hiện có (vì bạn đã có một dự án được thiết lập cho bảng xếp hạng của mình trong hướng dẫn trước) và chọn dự án của bạn.

Đối với thư mục công cộng của bạn, hãy nhập “xây dựng” vì đó là cấu trúc phản ứng thư mục sau khi xây dựng ứng dụng.

Để định cấu hình làm ứng dụng một trang, hãy chọn Có vì đây là ứng dụng React và do đó là ứng dụng một trang.

Và cuối cùng để thiết lập bản dựng tự động, hãy chọn những gì bạn yêu thích. Tôi chọn không, nhưng nếu bạn muốn thực hiện triển khai lại tự động mỗi khi bạn đẩy mã của mình vào thư mục chính trong GitHub thì hãy chọn có.

Ứng dụng của bạn bây giờ sẽ tự động định cấu hình.

Bây giờ để triển khai trang web, trước tiên bạn phải xây dựng ứng dụng của mình bằng cách chạy:

npm run build

trong thư mục ứng dụng của bạn. Điều này sẽ biên dịch ứng dụng của bạn thành một bản dựng sản xuất được tối ưu hóa trong thư mục bản dựng. Sau đó, sau khi nó được biên dịch, hãy chạy:

firebase deploy --only hosting

Sau khi nó được triển khai, thiết bị đầu cuối sẽ trả lại URL cho ứng dụng web đã triển khai.

Nếu bạn truy cập trang web đã triển khai của mình, bạn sẽ có một bảng xếp hạng trống, khi bạn thử chạy trò chơi, thanh tải sẽ gặp khó khăn khi kết nối với máy chủ. Đó là vì chúng tôi chưa triển khai ứng dụng máy chủ của mình trên máy ảo.

Bước 9) Triển khai back end

Chúng tôi sẽ sử dụng git để sao chép ứng dụng của mình vào máy ảo. Do đó, chúng tôi cần đảm bảo mã của mình được cập nhật trên GitHub.

Nếu bạn đã theo dõi ngay từ đầu, bạn nên thiết lập đại diện GitHub của riêng mình cho ứng dụng của mình. Vì vậy, chỉ cần chạy:

git add .
git commit -m "Ready for deployment"
git push

Nếu bạn chưa thiết lập kho lưu trữ GitHub, hãy làm như vậy bằng cách làm theo các hướng dẫn sau để nhập dự án vào Github tại đây.

Sau khi hoàn tất, hãy quay lại cloud shell của ứng dụng và đăng nhập lại vào máy ảo của bạn.

Nhấn ↑ trên bàn phím của bạn để nhận các lệnh đã sử dụng trước đó.

Bây giờ lấy url đến dự án GitHub của bạn:

Và sao chép dự án Github của bạn vào máy ảo của bạn bằng cách chạy:

git clone https://github.com/[username]/[example].git`

Bạn có thể nhận thấy rằng chúng tôi đã nhân bản cả ứng dụng và máy chủ vào máy ảo với phương pháp này không lý tưởng. Bạn chỉ có thể sao chép thư mục máy chủ, nhưng về mặt dễ quản lý các phiên bản khác nhau của ứng dụng, cách này sẽ tiết kiệm được rất nhiều vấn đề đau đầu.

Nếu bạn thấy dự án của mình chiếm quá nhiều dung lượng trong máy, hãy chọn xóa ứng dụng khỏi máy ảo. Hoặc tạo một kho riêng cho máy chủ và thư mục ứng dụng của bạn.

Bây giờ bạn có thể trong máy ảo của mình đi đến thư mục máy chủ của bạn và cài đặt các phụ thuộc của nó:

cd flappigotchi/server
npm install

Bây giờ trước khi chúng tôi có thể chạy ứng dụng, chúng tôi cần thêm một số thứ vào dự án. Những người có đôi mắt tinh tường có thể nhận thấy rằng cả biến service-account.json và .env của chúng tôi đều nằm trong tệp .gitignore. Do đó, khi chúng tôi đẩy và kéo mã của mình từ github, các tệp này sẽ không được đưa vào. Do đó, chúng ta cần viết lại chúng trong cloud shell.

Bởi vì chúng tôi chỉ chạy máy chủ của mình ở chế độ sản xuất với máy ảo, chúng tôi sẽ chỉ thêm tệp .env.production. Để thực hiện việc này, hãy chạy sudo nano .env.production trong thư mục máy chủ để tạo và mở tệp .env. Sau đó, bên trong sao chép và dán biến của bạn từ trước đó:

DB_COLLECTION="highscores"

Bây giờ, hãy làm tương tự đối với tệp JSON của tài khoản dịch vụ. Chạy sudo nano service-account.json và dán vào khóa tài khoản dịch vụ của bạn.

Nếu bạn định chạy sudo npm run start: prod ngay bây giờ, thì máy chủ của bạn hy vọng sẽ xuất ra một thông báo cho biết nó đang lắng nghe trên cổng: 8080!

Hy vọng rằng bây giờ, khi bạn mở ứng dụng đã triển khai của mình, ứng dụng đó sẽ kết nối với máy chủ của bạn mà không gặp sự cố và bạn sẽ có thể chơi và gửi điểm cho bảng xếp hạng!

10) Đặt tên miền cho giao diện người dùng

Trò chơi của bạn hiện đã hoạt động và sẵn sàng để thử nghiệm bởi cộng đồng Aavegotchi! Bây giờ chúng tôi chỉ muốn thiết lập tên miền của chúng tôi từ trước đó để trỏ đến giao diện người dùng của ứng dụng của chúng tôi.

Để thực hiện việc này, hãy truy cập bảng điều khiển firebase của bạn và trong menu bên, hãy chọn Lưu trữ:

1. Nhấp vào Thêm miền tùy chỉnh
2. Nhập tên miền mà bạn đã sử dụng cho máy chủ nhưng không có tên miền phụ của máy chủ được thêm vào.
3. Quay lại Cloud DNS từ trước và thêm cả hai bản ghi A.

Bản ghi trong Firebase

Bản ghi được nhập vào Google Cloud DNS

Bây giờ, trạng thái sẽ chuyển sang trạng thái đang chờ xử lý vì nó xác minh quyền sở hữu miền. Quá trình này có thể mất từ vài phút đến 24 giờ.

Sau khi nó được xác minh, bây giờ bạn sẽ có thể chơi trò chơi của mình tại miền nhất định của bạn!

Lời kết

Đó là nó! Trò chơi của bạn đã phát trực tiếp và sẵn sàng chơi!

Trong bài học này, bạn đã học cách thiết lập an toàn máy chủ web-socket trên Google Cloud, cũng như triển khai ứng dụng giao diện người dùng của mình.

Loạt 3 phần này là một cái nhìn tổng quan ở cấp độ cao về các khái niệm xây dựng một trò chơi. Vẫn còn nhiều điều có thể được thực hiện, vì vậy nếu có bất kỳ khái niệm nào bạn muốn xem trong hướng dẫn trong tương lai, hãy bình luận chúng ở bên dưới.

Nếu bạn vừa mới triển khai trò chơi của riêng mình. Nhắn tin cho tôi trên Twitter hoặc Discord để biết về việc tổ chức sự kiện EXP Aavegotchi!

Phần 4 của loạt bài này có thể sẽ là cách thêm hệ thống Pay2Play / Play2Earn vào trò chơi của bạn. Vì vậy, hãy đảm bảo theo dõi tôi @ccoyotedev hoặc @gotchidevs trên Twitter để cập nhật về các hướng dẫn trong tương lai.

Nếu bạn có bất kỳ câu hỏi nào về Aavegotchi hoặc muốn làm việc với những người khác để xây dựng các minigame Aavegotchi, hãy tham gia cộng đồng bất hòa Aavegotchi, nơi bạn có thể trò chuyện và cộng tác với các Aavegotchi Aarchitects khác!

Nếu bạn sở hữu Aavegotchi, bạn có thể xem kết quả cuối cùng của loạt bài hướng dẫn này tại flappigotchi.com.