강의

N
챌린지

멘토링

N
클립

커뮤니티

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 - biểu tượng của SPA, API Server dựa trên Node.js và tự động tạo tài liệu API thông qua Swagger. Hiểu được sự khác biệt giữa môi trường phát triển local và development server, có thể dễ dàng sử dụng AWS theo hướng dẫn. Tài liệu bài giảng: https://bit.ly/okreactapi

(4.6) 46 đánh giá

624 học viên

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

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

Bạn sẽ nhận được điều này sau khi học.

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

  • 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 thông qua 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

  • Giải quyết vấn đề CORS

  • Xây dựng cơ bản máy chủ AWS EC2

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

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

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

  • GitHub Actions를 이용한 CI/CD tự động hóa

Dự án SPA từ việc xây dựng môi trường phát triển local
đến tự động hóa triển khai server, hãy thử thách trực tiếp! ✌

📢 Vui lòng kiểm tra trước khi đăng ký khóa học!

  • Khóa học này không giải thích cú pháp của React và Node.js mà tập trung vào việc xây dựng môi trường phát triển và triển khai.
  • Tài liệu bài giảng có thể tải xuống từ bài học Phần 1 - Cấu hình môi trường phát triển SPA (1).

Dự án React SPA,
triển khai server + tự động hóa 💡

Bạn đã phát triển môi trường frontend và API server nhưng lại bối rối không biết phải triển khai như thế nào? Bạn có muốn làm quen với việc thiết lập môi trường phát triển xa lạ và quy trình CI/CD để triển khai không?

Trong khóa học này, bạn sẽ trực tiếp trải nghiệm quá trình xây dựng môi trường phát triển cục bộ cho dự án React và tự động hóa việc triển khai lên server. Khóa học sẽ đề cập đến môi trường phát triển ứng dụng đơn trang (SPA) sử dụng React - khác biệt so với phương thức phát triển web truyền thống, và giới thiệu về cách triển khai lên server để cung cấp dịch vụ. Ngoài ra, khóa học cũng đề 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 server triển khai.

Video được tạo dựa trên Windows, nhưng bạn có thể làm theo gần như hoàn toàn tương tự trên Mac và Linux. Hãy trực tiếp xem trong khóa học cách thiết lập môi trường phát triển, triển khai và tự động hóa được thực hiện như thế nào!

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

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

📌 Tổng hợp các kỹ năng được sử dụng trong khóa học

VSCode

Node.js

Git

GitHub

GitHub Actions

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 các nền tảng phát triển và công cụ phát triển cần thiết, cùng với việc đăng ký các tài khoản liên quan

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

Cấu hình môi trường dự án cơ bản cho frontend và backend để làm việc trên máy tính cục bộ

03. Quy trình triển khai

Giới thiệu quy trình và phương pháp triển khai lên server cho dịch vụ

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

Giới thiệu về cách kết nối domain với server và phương pháp thiết lập kết nối HTTPS

05. Tự động hóa triển khai

Khi mã nguồn thay đổi, công việc tự động triển khai lên máy chủ phát triển sẽ được mô tả

06. Cấu hình CORS

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

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

Kenu (허광남)

Thỉnh thoảng tôi làm chương trình phát sóng lập trình trên YouTube.

  • 2000.12 Bắt đầu OKJSP → Hiện tại đang vận hành với tên okky.kr
    • Cộng đồng phát triển chính của Hàn Quốc với 50,000 lượt truy cập mỗi ngày
  • Hiện tại là BJ phát sóng lập trình của okdevtv.com
  • Cựu CTO của PetFriends từ '18~'19
  • Cựu CTO của Hello Nature từ '17~'18
  • Trước đây '15~'17 GS SHOP đội đầu tư mạo hiểm CoE part
  • Cựu Evangelist của Khung tiêu chuẩn Chính phủ điện tử từ '12~'16

Xin chào, tôi là Kenu!

In ra Hello World thì việc chuẩn bị phát triển đã hoàn tất! Không chỉ dừng lại ở mức độ đã từng có kinh nghiệm viết code đơn thuần, mà còn có được sự tự tin có thể đưa code mình tạo ra lên server để phục vụ ứng dụng mà mình đã tạo cho mọi người sử dụng.

Hãy kiểm tra Q&A! 💬

Q. Người không chuyên ngành có thể nghe được bài giảng này không?

Vâng, những người không chuyên ngành cũng có thể học được. Chúng tôi sẽ giải thích chi tiết từ việc cài đặt các chương trình liên quan!
(Bạn cần có kiến thức tiên quyết về JavaScript!)

Q. Nội dung bài học được đề cập đến mức độ nào?

React và Node.js không đề cập đến cú pháp, mà giải thích về việc xây dựng môi trường phát triển, triển khai và tự động hóa.

Q. Khi phiên bản của các công nghệ được sử dụng trong khóa học được nâng cấp, liệu khóa học có được cập nhật không?

Khi phiên bản chính được nâng cấp đến mức khó có thể tiếp tục khóa học, việc cập nhật nội dung bài giảng là cần thiết. Do đó, tôi đang có kế hoạch cập nhật đến năm 2025.

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

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

  • Người vào làm với tư cách là developer startup nhưng không có mentor

  • Người mới bắt đầu với môi trường phát triển SPA và triển khai server

  • Những người mới sử dụng AWS lần đầu

  • Dành cho những ai muốn học cách cấu hình máy chủ HTTPS

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

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

  • JavaScript

Xin chào
Đây là

767

Học viên

52

Đá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ả

46 đánh giá

4.6

46 đánh giá

  • meltep00님의 프로필 이미지
    meltep00

    Đánh giá 9

    ∙

    Đánh giá trung bình 4.4

    5

    100% đã tham gia

    As mentioned in the lecture, this is not a lecture about React or Node.js. This lecture focuses on processes such as deployment, domain registration, and CI/CD settings. Junior developers tend to neglect elements such as CI/CD compared to development, but CI/CD is an essential process for the continuous development of a program. Through this lecture, I was able to easily learn how CI/CD is actually performed. I enjoyed the lecture :)

    • kenuheo
      Giảng viên

      Thank you for the good review. Be happy. 😊

  • ew2io3ogji23님의 프로필 이미지
    ew2io3ogji23

    Đánh giá 4

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    I'm new to programming and have just started developing locally and can easily create projects, but I was unfamiliar with the development environment settings and deployment CI/CD, and it was difficult to understand them. In particular, I had a hard time understanding what to do on the server, but it explained everything from the installation page guide to the environment settings, and covered the entire creation - setting - simple error resolution - deployment, so I was able to go through a cycle. The most difficult part when learning is that you have no choice but to move on to an abstract understanding because you have no experience, but after going through a cycle like this and looking at the lecture materials again, I think I gained more based on my experience, thinking, "Oh, that's what I did earlier!" Rather than those who want to get a detailed explanation of the projects (React, etc.) used from the development environment settings to deployment, it would be very helpful for those who are curious about "How on earth do I create, set up, deploy, and automate a project?" I don't know how much I can use the knowledge I learned in the lecture because I haven't worked in the field yet, but I'm sure that when I work on a project or in the field later, I'll be able to recall the experience I gained from the lecture and lay the foundation for learning. I hope this lecture will be widely known to beginners like me! Thank you for the great lecture.

    • kenuheo
      Giảng viên

      Thank you for your course review. I am glad that it was helpful. Establishing a development + deployment environment is basic. Creating the service you want here requires more effort. I hope you create a good service. I support you!

  • yeslee님의 프로필 이미지
    yeslee

    Đánh giá 4

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    It was a useful lecture because I was able to gather all the scattered concepts related to distribution at once. After finishing it, I got a sense of what I need to study more intensively.

    • mike2ox님의 프로필 이미지
      mike2ox

      Đánh giá 1

      ∙

      Đánh giá trung bình 5.0

      5

      75% đã tham gia

      for students who are worried about payment - I have only tried local operation and have never set up an initial development environment considering CI/CD, but this lecture was good because I was able to learn how the entire process should proceed, although it is simple. - So, I think you should keep in mind that the code written for environment setup or the explanation of the installed package/framework was omitted. - There are probably many beginners who took the lecture thinking, “CI/CD is essential these days, so I should just take it.” Those people will learn this lecture and there will come a time when they need to customize CI/CD for the project they will be working on later. At that time, if you refer to the meaning of the code attached to the lecture and research the basic framework learned in this lecture, I think you will be able to properly understand CI/CD. Conclusion - Recommended for developers who want to learn the basics of CI/CD - When you need to customize in depth, it is expected that it will be of great help in improving your skills if you analyze the code of this lecture and learn the necessary parts additionally - Thank you for opening a great lecture!

      • kenuheo
        Giảng viên

        Thank you for your review. As you mentioned, there are many better features, so I hope you use them well. Be a happy programmer.

    • saokm50392님의 프로필 이미지
      saokm50392

      Đánh giá 4

      ∙

      Đánh giá trung bình 4.5

      5

      100% đã tham gia

      Thank you for the great lecture! It was very helpful because I was able to learn in detail not only about distribution automation but also how to use basic tools. I have only been working with PHP, so I have not been able to properly separate the front and back, but after watching the great lecture, I was able to separate them for the first time and even deploy them myself. In addition, I had the opportunity to learn how to use github, which was very helpful. Thank you.

      • kenuheo
        Giảng viên

        Thanks for the great review. SPA has one more thing to deal with, the frontend, so I focused on that part. Be a happy programmer.

    923.946 ₫

    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!

    Easy Windows Development Environment Setup Without Any Hassle강의 썸네일

    Easy Windows Development Environment Setup Without Any Hassle

    kenuheo

    How to easily set up git, VS Code, Node.js, Python, Java dev environments on Windows within 2 hours without struggling.

    입문

    입문

    Git, VSCode, Microsoft Windows

    Easy Windows Development Environment Setup Without Any Hassle강의 썸네일

    Easy Windows Development Environment Setup Without Any Hassle

    kenuheo

    Git and VS Code강의 썸네일

    Git and VS Code

    kenuheo

    * Lecture for those who are new to Git and GitHub * Basic Git features and Git-related plugins in VS Code

    입문

    입문

    Git, GitHub, VSCode

    Git and VS Code강의 썸네일

    Git and VS Code

    kenuheo

    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!

    [DevOps] Creating a fast and secure application deployment pipeline (CI/CD)강의 썸네일

    [DevOps] Creating a fast and secure application deployment pipeline (CI/CD)

    rex

    Fast is dangerous, and safe is slow? Not true. Let's create a fast and safe pipeline!

    중급이상

    중급이상

    gitlab, CI/CD, AWS

    [DevOps] Creating a fast and secure application deployment pipeline (CI/CD)강의 썸네일

    [DevOps] Creating a fast and secure application deployment pipeline (CI/CD)

    rex

    Application Deployment Automation and CI/CD강의 썸네일

    Application Deployment Automation and CI/CD

    foo

    Through this course, you will experience application deployment automation. While deploying a project, you will also learn how to use Jenkins and gain basic knowledge about CI/CD!

    초급

    초급

    Jenkins, CI/CD, nginx

    Application Deployment Automation and CI/CD강의 썸네일

    Application Deployment Automation and CI/CD

    foo

    DevSecOps Basic (/w SAST)강의 썸네일

    DevSecOps Basic (/w SAST)

    taesun1114

    What is DevSecOps? Configure a CI build environment and an environment that automatically performs SAST checks during build

    입문

    입문

    CI/CD, sast, SonarQube

    DevSecOps Basic (/w SAST)강의 썸네일

    DevSecOps Basic (/w SAST)

    taesun1114

    DevSecOps SAST(/w GitLab)강의 썸네일

    DevSecOps SAST(/w GitLab)

    taesun1114

    What is DevSecOps? Configure a CI build environment and an environment that automatically performs SAST checks during build

    초급

    초급

    sast, CI/CD, gitlab

    DevSecOps SAST(/w GitLab)강의 썸네일

    DevSecOps SAST(/w GitLab)

    taesun1114

    Master Python Project & Dependency Management All at Once with Poetry!

    haeyeomiso

    You've all had the painful experience of managing requirements.txt, right? 😅 Now solve dependency issues cleanly with the latest Poetry 2.x. This course proceeds by building a FastAPI practical project from start to finish. It covers the real-world workflow including development environment, CI/CD, and Docker deployment. Reduce environment setup worries and build professional Python development skills! 👍

    입문

    입문

    Python, CI/CD, dependency-management

    Master Python Project & Dependency Management All at Once with Poetry!

    haeyeomiso

    Docker Essentials - Getting a Feel for Containers & Docker강의 썸네일

    Docker Essentials - Getting a Feel for Containers & Docker

    skilleat

    This is not a lecture that simply memorizes commands. It's a practical introductory course that helps you intuitively understand the 'flow' of technology - why containers emerged, how Docker creates and runs images based on what principles. Even if you're encountering Docker for the first time, after taking this course, you'll be able to explain "why containers are a necessary technology" on your own.

    입문

    입문

    Docker, CI/CD, infrastructure

    Docker Essentials - Getting a Feel for Containers & Docker강의 썸네일

    Docker Essentials - Getting a Feel for Containers & Docker

    skilleat

    Learn Nginx + Docker + Springboot Zero-Downtime Server Deployment Faster Than Anyone강의 썸네일

    Learn Nginx + Docker + Springboot Zero-Downtime Server Deployment Faster Than Anyone

    Neo

    This course is designed to help you quickly learn server zero-downtime deployment methods using Nginx, Docker, and Spring Boot through hands-on practice. Learn Blue-Green deployment, which is frequently used in real-world scenarios, faster than anyone else!

    초급

    초급

    Kotlin, Docker, Spring Boot

    Learn Nginx + Docker + Springboot Zero-Downtime Server Deployment Faster Than Anyone강의 썸네일

    Learn Nginx + Docker + Springboot Zero-Downtime Server Deployment Faster Than Anyone

    Neo

    Essential development environment guide that even an ordinary office worker can understand in a single breath강의 썸네일

    Essential development environment guide that even an ordinary office worker can understand in a single breath

    goka

    Learn from the beginning how to set up a development environment that even an ordinary office worker can easily understand. It is practice-oriented and focuses on students learning various development tools such as Vim, VS Code, Git, Docker, and remote development. You can learn how to build an efficient development environment by learning step-by-step from the basic usage of each development tool to advanced functions.

    입문

    입문

    Git, Vim, VSCode

    Essential development environment guide that even an ordinary office worker can understand in a single breath강의 썸네일

    Essential development environment guide that even an ordinary office worker can understand in a single breath

    goka