프론트엔드 개발자를 위한 Nginx

내 블로그에서 이 게시물을 읽고 내 작업을 지원합니다. Nginx For Front-end Developers

이 기사는 프론트엔드 개발자를 위한 Nginx를 훨씬 간단하게 설명하기 위한 것입니다.

Nginx는 주로 C10k problem의 문제를 해결하는 강력하고 효율적인 웹 서버입니다. 놀라운 속도로 데이터를 제공할 수 있습니다. 역방향 프록시, 로드 밸런싱 및 파일 캐싱과 같은 다른 용도로도 Nginx를 사용할 수 있습니다.

프론트 엔드 개발자로서 Nginx에 대해 배워야 하는 이유를 물어볼 수 있습니다. 모던 프론트 엔드 개발 세계에서는 프론트엔드에서 작업하는 모든 것이 단일 HTML, JS 및 CSS 파일로 컴파일됩니다. 따라서 웹 서버가 프로덕션에서 파일을 처리하는 방법을 아는 것이 유용할 것입니다.

Nginx 아키텍처:

기본 nginx 아키텍처는 마스터 프로세스와 해당 작업자로 구성됩니다. 마스터는 구성 파일을 읽고 작업자 프로세스를 유지 관리하는 반면 작업자는 실제 요청 처리를 수행합니다.



Nginx는 Master- slave, Event-driven 및 Non-Blocking 아키텍처입니다.

마스터 - 마스터는 구성을 유지 관리하고 검증할 책임이 있습니다. 또한 작업자 프로세스를 생성하고 종료할 책임이 있습니다.

작업자 - 작업자 프로세스는 공유 소켓에서 요청을 처리합니다. 프로세스가 단일 스레드이고 비차단이므로 모든 작업자 프로세스는 수천 개의 요청을 처리할 수 있습니다

.

캐시 로더 - 캐시 로더는 요청 메타 데이터에 따라 디스크에 존재하는 데이터로 작업자 인스턴스를 업데이트합니다.

캐시 관리자 - 캐시 관리자는 캐시 만료 확인 및 구성을 담당합니다

.

Nginx 설치:

개발 머신에 nginx를 설치하는 방법을 살펴보겠습니다. 나는 macOS를 사용하고 있습니다. Linux, Windows에 자유롭게 설치하십시오.

Mac에 nginx를 설치하려면 컴퓨터에 Homebrew이 설치되어 있어야 합니다.

참고: Ubuntu 또는 Windows의 경우 이 공식installation guide을 따르십시오.

$ brew install nginx
$ nginx -v

이제 화면에서 이와 같은 것을 볼 수 있습니다.



그리고 웹 서버가 실행 중인지 확인하려면 브라우저에서 http://localhost:8080을 실행합니다. nginx 기본 페이지가 표시되어야 합니다.



짜잔!!!!! 로컬 머신에 nginx를 성공적으로 설치했습니다.

이제 nginx 서버를 사용하여 React 애플리케이션을 배포하는 방법을 살펴보겠습니다. Random Quote generator 애플리케이션을 배포할 예정입니다.

소스코드 : https://github.com/ShanteDenise/React-Random-Quote-Generator

nginx 서버를 사용하여 앱 배포

머신에 nginx를 설치한 후/usr/local/etc/nginx 위치에 있는 nginx 구성 파일에 액세스할 수 있습니다. 다음과 같이 nginx에 있는 파일과 디렉토리를 볼 수 있습니다.



서버를 구성하기 전에. 반응 애플리케이션을 빌드하고 파일을 nginx 디렉토리로 이동해야 합니다.

macOS에서 nginx의 기본 파일 위치는/usr/local/var/www 입니다. 빌드를 nginx 폴더로 옮겨야 합니다.

$ sudo mv -v /<build directory> /usr/local/var/www/demo

그런 다음 nginx.conf 파일에서 서버를 구성해야 합니다.

$ sudo nano nginx.conf

주로 nginx 구성 파일에는 두 개의 블록이 있습니다. http 및 서버 블록. nginx 구성 파일에는 하나의 http 블록만 있고 http 블록 안에 서버 서버 블록을 만들 수 있습니다. 다른 기사에서 nginx의 지시문과 블록 개념을 볼 것입니다.

구성 파일에 다음 코드 추가

http {
         ...
  server {
        listen       8080;
        server_name  localhost;
    location / {
            root   /var/www/demo;
            index  index.html index.htm;
        }

그런 다음 nginx 서비스를 다시 시작해야 합니다.

$ sudo brew services restart nginx

마지막으로 브라우저에서 localhost:8080을 실행하면 애플리케이션이 다음과 같이 실행되는 것을 볼 수 있습니다.

무작위 인용 생성기

Yayy!!!.. 이제 nginx 웹 서버를 사용하여 응용 프로그램을 실행합니다.

다음 기사에서는 nginx의 작동 방식과 nginx 서버를 커스터마이징할 수 있는 방법을 알아보겠습니다. 그런 다음 Happy Coding!!!

web development에 대해 자세히 알아보기