다중 패스 가상 머신을 사용하여 웹 사이트 개발

이 시리즈의 이전 기사를 읽으면 이제 Mac에서 가상 머신으로 실행되는 새로운 Ubuntu 인스턴스가 있어야 합니다. 이 기사에서는 웹 사이트를 구축하고 테스트할 수 있는 빠른 개발 환경을 설정합니다.

웹 서버 설치

우리는 nginx를 웹 서버로 사용할 것입니다. 실행할 새 Ubuntu 가상 머신이 있으므로 셸 연결을 열고 설치 단계를 실행해 보겠습니다.

먼저 연결할 VM 인스턴스를 결정하고 multipass ls를 사용하여 모든 인스턴스 목록을 가져옵니다. 인스턴스의 이름을 기록하고 실행 중인지 확인하십시오. 제 경우에는 vm-multipass 라는 인스턴스에 연결하겠습니다.
multipass sh 명령을 사용하여 셸 연결을 엽니다.

% multipass sh vm-multipass
  Welcome to Ubuntu 20.04.5 LTS (GNU/Linux 5.4.0-126-generic aarch64)
  ...

이제 표준 명령을 실행하여 nginx 소프트웨어 패키지를 설치하십시오. (이러한 명령은 가상 머신에서 실행되므로 실제 머신에는 소프트웨어가 설치되지 않습니다.)

$ sudo apt update
$ sudo apt install nginx

이제 가상 머신에서 실행 중인 nginx 웹 서버가 있어야 합니다. multipass ls의 출력을 다시 참조하면 인스턴스의 IP 주소가 표시됩니다. 제 경우에는 IPV4가 192.168.64.2이므로 이제 실제 컴퓨터의 웹 브라우저에서 http://192.168.64.2로 이동하여 기본 "Welcome to nginx!"를 볼 수 있습니다. 홀딩 페이지.

작업 폴더를 VM 서버에 마운트

내 목표는 내 실제 컴퓨터를 사용하여 내 웹 사이트에서 사용되는 파일을 빌드하고 편집하는 것입니다. 즉, 작업은 내 MacOS 환경에서 발생하지만 해당 폴더는 가상 컴퓨터에서 실행되는 웹 서버에서 제공됩니다. 이를 달성하기 위해 로컬 작업 폴더를 가상 머신과 공유하여 거기에 있는 파일을 두 시스템 모두에서 사용할 수 있도록 하겠습니다. multipass mount 명령을 사용하여 ~/workspace/vm-multipass/app 에 있는 내 작업 폴더를 /var/www/app 에 있는 가상 머신 폴더와 공유하겠습니다.

% multipass mount ~/workspace/vm-multipass/app vm-multipass:/var/www/app

일부 앱 파일 추가

이제 ~/workspace/vm-multipass/app에서 생성한 모든 파일은 /var/www/app 폴더에 있는 "vm-multipass"라는 가상 머신 인스턴스에서도 사용할 수 있습니다. 예를 들어 index.html에 간단한 ~/workspace/vm-multipass/app 파일을 생성한 다음 가상 머신 인스턴스에 연결하면 동일한 파일이 /var/www/app/index.html에 표시됩니다.

Nginx 호스트 구성

우리는 nginx에게 /var/www/app 폴더에서 우리를 위해 제공하기를 원하는 이 새로운 웹 사이트에 대해 알려야 합니다. 가상 머신 인스턴스에 연결된 셸에서 새 nginx 구성 파일을 생성합니다.

$ sudo vim /etc/nginx/sites-available/app

해당 파일의 내용은 다음과 같습니다.

server {
    listen 80;
    listen [::]:80;

    server_name myapp.test;

    root /var/www/app;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

즉, nginx는 도메인 이름이 "myapp.test"인 모든 요청에 ​​대해 작업 공간에서 공유되는 마운트된 폴더인 /var/www/app에서 파일을 제공합니다. 물론 myapp.test는 실제 도메인이 아닙니다. 즉, 우리는 이 도메인을 사이트의 로컬 개발 버전에 대한 자리 표시자로만 사용하고 있습니다.
sites-available 폴더에 새 구성을 추가했지만 sites-enabled 폴더에도 이 새 파일에 대한 링크를 만들어야 합니다.

$ sudo ln -s /etc/nginx/sites-available/app /etc/nginx/sites-enabled/app

그리고 nginx에서 구성이 변경될 때마다 해당 구성 파일을 다시 로드하도록 지시해야 합니다.

$ sudo service nginx configtest
  [OK]
$ sudo systemctl reload nginx

도메인 이름 확인 구성

이제 실제 시스템에 방금 발명한 이 새로운 도메인 이름에 대해 알리고 해당 도메인 이름에 대한 요청을 가상 시스템의 IP 주소로 보내도록 구성해야 합니다(multipass ls를 사용하여 찾을 수 있음). 실제 시스템의 /etc/hosts 파일에 새 줄을 추가하면 됩니다. 제 경우에는 그 줄이 다음과 같습니다.

192.168.64.2    myapp.test

이제 내 실제 머신의 웹 브라우저에 "myapp.test"를 입력하면 my 192.168.64.2 에 지정된 대로 해당 요청을 /etc/hosts 로 보냅니다. 이 요청은 내 가상 머신의 nginx 서버에서 처리됩니다. /var/www/app 에 있는 가상 머신 폴더에서 파일을 반환하도록 구성되었으며, 이 폴더는 ~/workspace/vm-multipass/app 에 있는 내 실제 머신의 작업 공간에 있는 공유 폴더에 마운트됩니다.

아휴! 그것은 여정에 관한 것이지만 결국에는 Ubuntu 가상 서버에서 서비스를 제공하면서 Mac 데스크톱을 사용하여 웹 사이트를 구축하기 위한 이상적인 개발 환경을 갖게 되었습니다.