VPS - 5

22 May 2022

Reading time ~2 minutes

VPS-5

VPS 호스팅거 서브도메인 만들기

기존의 shared hosting에서는 간단하게 subdomain을 원하는대로 만들 수 있었지만, VPS에서는 자동으로 되지 않는 것 같다.

What Are Subdomains? A Comprehensive Guide For Beginners

Setup Domains/Subdomains on VPS in Ubuntu

서브도메인 사용 목적

Testing out a new website. You can edit and rebuild sites without having to put the main domain in maintenance mode.
Launching different language versions of your site. You can have separate websites that cater to different regions. For example, in.yourdomain.com for India, to fr.yourdomain.com for France, and id.yourdomain.com for Indonesia.
Creating a mobile version of your website. To make sure the site looks and works great on mobile devices, you can use a subdomain URL such as m.yourdomain.com, for example.
Offering different products and services. Separate your forum site, store, blog, help center, and other unique content from the main domain.
Creating unique designs. You can host your subdomains on platforms that offer better services for your needs, such as other CMSs, website builders, or eCommerce site builders.
Better site organization. For instance, having a subdomain for customer support allows your business to have a dedicated website for FAQ, community, documentation, and other help pages.

현재 1번과 5번 목적으로 사용중이다.

VPS-7

What is my VPS hostname and how to change it?

Server name

서버 네임을 확인하던 중, 가지고 있던 도메인 네임은 lajanciadev.com이고 서버 네임은 이와 전혀 다른 것으로 설정되어있는 상태라는 것을 확인했다. 추후에 도메인 네임을 vps로 가리킬 때 문제가 생기지는 않을까 생각되어 확인해보았다.

결론적으로 문제는 없다. 하지만 구분을 위해 서브 도메인과 같이 이름을 설정해주는 것이 좋다.

NGINX에 추가 포트 설정하기

shared hosting에서 vps로 이사를 가려 하지만, 기존의 shared hosting에서 서브 도메인으로 운영하고 있던 t세 개의 WebGL 프로젝트를 그대로 운영하고 싶은 마음에 포트를 추가하여 운영할 방법이 없는지 찾아보려 한다. 단, WebGL은 node가 설치되어있지 않기 때문에 먼저 예전에 사용했던 홈페이지를 8081 포트에 올려보려고 한다.

shared hosting 만료 이전에 모두 정상적으로 운용되게 하고 도메인 네임 서버를 vps로 가리키려 한다.

참고

site-available

server {
        listen 81;
        listen [::]:81;

        root /repos/fullstack_project/dist;
        index index.html index.htm index.nginx-debian.html;
        #You can put your domain name here for ex: www.servername.com
        server_name ip_address;

        location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://localhost:8081/;
                proxy_redirect http://localhost:8081/ https://$server_name:8081/;
        }
}

ISSUE

이슈 - 1

502 Bad Gateway

처음 port를 추가한 것과 같은 방식으로 추가하여 만들어보았지만 위와 같은 에러가 나타나고 있었다. error 로그를 훑어보니 connection refuse라고 적혀있다.

이슈 - 2

pm2 start 'npm run serve -- --port8081'

포트를 8081로 지정하여 실행시켰더니 Error: Loading PostCSS Plugin failed: Cannot find module ‘tailwindcss’ 에러 발생

이슈 - 3

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

위의 명령어 이외에 각각의 버전을 설치할 경우 alia 에러가 발생한다. 이는 npm 버전이 낮아서 발생하는 문제였다. 기존의 nvm 8을 nvm 16으로 변경하여 버전을 올려준다.

이슈 - 4

ERROR: npm is known not to run on Node.js v11.0.0

위는 npm이 변경됨에 따라 기존의 설치된 모듈들도 다시 npm i를 통해 재설치를 해주어야 한다. 또한 sudo와 pm2 또한 다시 재설치를 해야 한다.

결과

Untitled

8081 포트에서 정상적으로 동작하는 것을 확인할 수 있다. 추후에 html 파일의 WebGL의 포트를 따로 지정하여 연결해주도록 한다.

nodejs vue js Hostinger vps vuex