Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Devops & Infra

Phát triển và triển khai dự án React + API Server (CI/CD)

Tạo môi trường phát triển React, đồng nghĩa với SPA và tự động tạo tài liệu API thông qua Máy chủ API và Swagger dựa trên Node.js. Bạn có thể hiểu sự khác biệt giữa môi trường phát triển cục bộ và máy chủ phát triển và sử dụng AWS một cách dễ dàng.

(4.6) 44 đánh giá

621 học viên

  • kenuheo
3시간 만에 완강할 수 있는 강의 ⏰
CI/CD
SPA

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Môi trường phát triển React và cấu hình máy chủ

  • Tạo môi trường phát triển React dựa trên Vite

  • Máy chủ API dựa trên Node.js

  • Tự động hóa tài liệu API với Swagger

  • Sự khác biệt giữa môi trường phát triển cục bộ và máy chủ phát triển

  • Vấn đề CORS đã được giải quyết

  • Kiến thức cơ bản về xây dựng máy chủ AWS EC2

  • Cách sử dụng cơ bản của Nginx (máy chủ web)

  • Kết nối Nginx và Node.js

  • Cấp chứng chỉ HTTPS miễn phí

  • Tự động hóa CI/CD bằng GitHub Actions

Từ việc thiết lập môi trường phát triển cục bộ cho các dự án SPA
Hãy tự mình thử thách việc tự động triển khai máy chủ! ✌

📢 Vui lòng kiểm tra trước khi tham gia lớp học!

  • Bài giảng này không giải thích ngữ pháp của React và Node.js, nhưng sẽ đề cập đến cách thiết lập môi trường phát triển và triển khai.
  • Tài liệu bài giảng có thể được tải xuống từ lớp Phần 1 - Cấu hình Môi trường phát triển SPA (1).

Dự án React SPA,
Triển khai máy chủ + tự động hóa 💡

Bạn đã phát triển môi trường front-end và máy chủ API nhưng chưa biết cách triển khai? Bạn có muốn tìm hiểu về quy trình thiết lập môi trường phát triển và triển khai CI/CD không?

Trong khóa học này, bạn sẽ được trải nghiệm trực tiếp quy trình thiết lập môi trường phát triển cục bộ cho một dự án React và tự động hóa việc triển khai máy chủ. Chúng tôi sẽ đề cập đến môi trường phát triển cho ứng dụng một trang (SPA) bằng React , một sự thay đổi so với các phương pháp phát triển web truyền thống, đồng thời giới thiệu cách triển khai và vận hành ứng dụng này trên máy chủ . Chúng tôi cũng sẽ đề cập đến việc tự động hóa tài liệu API bằng Swagger, giúp bạn hiểu được sự khác biệt giữa môi trường phát triển cục bộ và môi trường máy chủ đã triển khai.

Mặc dù video này được tạo cho Windows, hầu hết các bước đều có thể được thực hiện trên Mac và Linux. Hãy xem video để tìm hiểu cách thiết lập, triển khai và tự động hóa môi trường phát triển của bạn.


Được đề xuất cho những người này 🎁

  • ✅ Những người thích phát triển theo hướng dịch vụ hơn là phát triển theo hướng ngữ pháp
  • ✅ Dành cho những ai chưa biết cách tải code lên server
  • ✅ Dành cho những ai muốn biết nó khác với web cổ điển như thế nào
  • ✅ Nếu bạn mới sử dụng AWS hoặc muốn tìm hiểu cách cấu hình máy chủ HTTPS

📌 Tổng hợp các kỹ năng được sử dụng trong bài giảng

Mã VS

Node.js

Git

GitHub

Hành động GitHub

AWS EC2

AWS Route53

Nginx + HTTPS
(Chứng chỉ SSL)


Xem trước nội dung học tập 📚

01. Chuẩn bị

Giới thiệu về các nền tảng phát triển thiết yếu, các công cụ phát triển và cách đăng ký tài khoản liên quan.

02. Cấu hình môi trường phát triển SPA

Thiết lập môi trường dự án cơ bản cho công việc front-end và back-end trên máy tính cục bộ

03. Quy trình phân phối

Giới thiệu về quy trình và phương pháp triển khai tới máy chủ để phục vụ

04. Đăng ký tên miền và thiết lập HTTPS

Cách kết nối tên miền và máy chủ và thiết lập kết nối HTTPS

05. Tự động hóa phân phối

Mô tả các tác vụ được triển khai tự động tới máy chủ phát triển khi mã thay đổi

06. Cài đặt CORS

Các vấn đề về CORS và xây dựng cấu hình biến môi trường trong môi trường phát triển cục bộ


Giới thiệu Người chia sẻ kiến thức ✒️

Kenu (Heo Gwang-nam)

Tôi thường phát sóng chương trình trên YouTube .

  • OKJSP ra mắt vào tháng 12 năm 2000 → Hiện đang hoạt động với tên gọi okky.kr
    • Một cộng đồng nhà phát triển trong nước hàng đầu với 50.000 lượt truy cập mỗi ngày
  • Chương trình phát sóng hiện tại của okdevtv.com BJ
  • Cựu giám đốc công nghệ của Pet Friends (18-19)
  • Cựu giám đốc công nghệ của Hello Nature (17-18)
  • Cựu thành viên CoE của Đội đầu tư mạo hiểm GS SHOP, '15~'17
  • Cựu chuyên gia truyền bá Khung tiêu chuẩn Chính phủ điện tử '12~'16

Rất vui được gặp bạn, tôi là Kenu!

Sau khi tạo xong "Hello World", bạn đã sẵn sàng để phát triển! Không chỉ đơn thuần là có chút kinh nghiệm viết mã, bạn sẽ tự tin tải mã lên máy chủ và bảo trì để mọi người có thể sử dụng các ứng dụng bạn đã tạo.


Hãy xem phần Hỏi & Đáp! 💬

H. Đây có phải là khóa học mà sinh viên không chuyên ngành cũng có thể tham gia không?

Vâng, ngay cả những người không chuyên cũng có thể dễ dàng theo dõi. Chúng tôi sẽ cung cấp giải thích chi tiết, bắt đầu bằng việc cài đặt các chương trình liên quan!
(Bạn phải biết JavaScript như một điều kiện tiên quyết!)

H. Nội dung bài học được trình bày ở mức độ nào?

Tài liệu này không đề cập đến ngữ pháp của React và Node.js, nhưng giải thích cách thiết lập môi trường phát triển, triển khai và tự động hóa nó.

H. Các bài giảng có được cập nhật khi phiên bản công nghệ được sử dụng trong bài giảng được nâng cấp không?

Nếu việc nâng cấp phiên bản chính trở nên quá quan trọng đến mức cản trở tiến độ của khóa học, việc cập nhật nội dung khóa học sẽ là cần thiết. Do đó, các bản cập nhật được lên kế hoạch cho đến năm 2025.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Một người tham gia startup với vai trò là lập trình viên nhưng không thành công

  • Nếu bạn chưa quen với môi trường phát triển SPA và triển khai máy chủ

  • Nếu bạn chưa quen với AWS

  • Bất cứ ai muốn tìm hiểu cấu hình máy chủ HTTPS

  • CI/CD Người mới bắt đầu

Cần biết trước khi bắt đầu?

  • JavaScript

Xin chào
Đây là

755

Học viên

49

Đánh giá

43

Trả lời

4.6

Xếp hạng

3

Các khóa học

https://okky.kr 창립자이며, https://github.com/kenu/okdevtv 에서 배운 것을 공유하고 있습니다.

https://mp4.okdevtv.com 에 개발관련 채널의 최신 영상을 모으고 있습니다.

KenuHeo 유튜브에서 프로그래밍 방송을 500회 이상 진행하고 있습니다.

 

Chương trình giảng dạy

Tất cả

8 bài giảng ∙ (1giờ 48phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

44 đánh giá

4.6

44 đánh giá

  • Mx님의 프로필 이미지
    Mx

    Đánh giá 9

    Đánh giá trung bình 4.4

    5

    100% đã tham gia

    강의에서도 언급을 하지만 React나 Node.js에 대해서 다루는 강의는 아닙니다. 배포와 도메인 등록, CI/CD 설정 등의 과정에 초점이 맞춰진 강의입니다. 주니어 개발자의 경우 개발에 비해 CI/CD 같은 요소에 소홀하기 쉬운데 CI/CD는 프로그램의 지속적인 발전을 위해서는 꼭 필요한 과정이죠. 이 강의를 통하여 CI/CD가 실제로 어떻게 이루어지는지 쉽게 배울 수 있었습니다. 좋은 강의 잘 들었습니다 :)

    • Kenu 허광남
      Giảng viên

      좋은 수강평 감사합니다. 행복하세요. 😊

  • OHJUHYEON님의 프로필 이미지
    OHJUHYEON

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    프로그래밍에 입문하고 이제 막 로컬에서 개발해서 프로젝트를 간단하게 만들 수 있게 되었는데 이런 개발 환경 셋팅과 배포 CI/CD에 대해서는 생소하기도 하고 이해가 어려워 접하기가 까다로웠습니다. 특히, 서버에서 무엇을 한다는 것에 대한 이해가 어려웠는데 설치하는 페이지 안내부터 환경 셋팅까지 설명해 주고 전체적인 생성 - 셋팅 - 간단한 오류 해결 - 배포까지 다뤄주어 한 싸이클을 돌릴 수 있게 되었습니다. 배울 때 제일 어려운 게 경험해 보지 못한 것을 그렇구나 하고 어쩔 수 없이 추상적인 이해로 넘어가야 하는 부분인데 이렇게 한 싸이클을 돌리고 다시 강의 자료를 보니 경험을 기반으로 '아, 아까 했던 그거!' 하면서 얻어 가는 게 더 많아지는 것 같습니다. 개발 환경 셋팅에서 배포까지 사용되는 프로젝트(React..등)나 상세 설명을 얻기 위한 분들보다는 '도대체 프로젝트를 어떻게 만들어서 셋팅하고 배포하고, 그것을 자동화하지?'에 대한 궁금증을 해결하지 못 한 분들이 들으면 매우 좋을 것 같습니다. 아직 현업에서 일을 해 본 경험이 없어서 강의에서 습득한 지식을 얼마나 활용할 수 있을지는 모르겠지만 나중에 프로젝트나 현업에서 일을 할 때 강의를 통해 얻은 경험을 떠올려 학습의 기반을 마련할 수 있을 것임을 확신하며, 이 강의가 저와 같은 초보자에게 많이 알려졌으면 좋겠네요! 좋은 강의 감사합니다.

    • Kenu 허광남
      Giảng viên

      수강 후기 감사합니다. 도움이 되어서 저도 기쁩니다. 개발+배포 환경을 구축하는 것은 기본입니다. 여기에 원하는 서비스를 만드는 것은 더 많은 노력이 필요합니다. 좋은 서비스 만드시길 바랍니다. 응원합니다!

  • 프로그래머님의 프로필 이미지
    프로그래머

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    배포 관련해서 흩어진 개념들을 한 번에 모아볼 수 있어서 유익한 강의였습니다. 완강하고 나니 무엇을 좀 더 집중적으로 공부해야하는지 감이 왔습니다.

    • moonhyeok song님의 프로필 이미지
      moonhyeok song

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      75% đã tham gia

      for 결제고민하는 수강생 - 매번 로컬에서만 동작해보고 CI/CD를 고려한 초반 개발환경 구축은 안해봤는데 본 강의를 통해 간단하지만 전체 과정이 어떤식으로 진행되야 하는지 알 수 있어서 좋았습니다. - 그렇다보니 환경 설정을 위해 작성한 코드나 설치한 패키지/프레임워크 설명은 생략되었다는 점을 염두해 두셔야할 듯 싶습니다. - 아마 웹 개발자체도 처음인데 '요즘 CI/CD는 필수니까 그냥 수강해야겠다'라는 생각으로 강의를 들으신 초급자분들도 많으실겁니다. 그러신 분들은 본 강의를 학습하시고 훗날 진행하실 프로젝트에 맞게 CI/CD를 커스텀해야할 때가 올건데 그 때 본 강의에서 익힌 기본 골격에서 강의에 첨부된 코드들의 의미를 참고 + 조사하시면 CI/CD를 제대로 이해하게 되지않을까 싶네요. 결론 - CI/CD 큰 틀 잡는 목적으로 들으실 개발자분들께서 추천 - 심도있게 커스텀해야할 때는 본 강의 코드를 분석해가면서 필요한 부분을 추가 학습한다면 실력증진에 도움이 많이 될 것으로 기대 - 좋은 강의를 열어주셔서 감사합니다!

      • Kenu 허광남
        Giảng viên

        수강평 감사합니다. 말씀하신 것처럼 더 좋은 기능들도 많이 있으니 잘 이용하시길 바랍니다. 행복한 프로그래머 되세요.

    • 테라님의 프로필 이미지
      테라

      Đánh giá 4

      Đánh giá trung bình 4.5

      5

      100% đã tham gia

      좋은 강의 감사합니다! 배포 자동화에 대한 내용뿐만 아니라 기초적인 툴 사용방법까지 상세하게 알 수 있어서 많은 도움이 되었습니다. 계속 PHP만 해와서 프론트 백 분리를 제대로 못해봤는데 좋은 강의를 보며 처음으로 분리해보고 직접 배포까지 해봤습니다. 더불어 github 사용까지 배울 수 있는 기회가 있어서 많은 도움이 되었습니다. 감사합니다.

      • Kenu 허광남
        Giảng viên

        좋은 리뷰 감사합니다. SPA는 다룰 게 프론트엔드가 하나 더 있어서 그 부분에 집중했습니다. 행복한 프로그래머 되세요.

    1.611.840 ₫

    Khóa học khác của kenuheo

    Hãy khám phá các khóa học khác của giảng viên!

    Khóa học tương tự

    Khám phá các khóa học khác trong cùng lĩnh vực!