본문 바로가기

개발/연구

[Blazor, Server] Blazor&nginx 서버를 배포해보자.

Blazor가 나온지 얼마 안된 프레임워크라 그런지, 국내에 인프라가 적은 것 같다.

이번에 구상해둔 플랫폼이 있는데, 플랫폼을 개발하기 위해 Blazor를 서버에 올려야했다.

 

자. 한번 따라해보자

 

그림[1]

최종적인 산출물로는 http로 해당 페이지를 출력하는 것이다.

위는 Blazor의 Hello World인 셈이다.

 

일단 local에서 다음을 수행하도록 하자.

~$ dotnet new blazorserver -o BlazorApp[이 부분이 앱 이름임] --no-https

 


Install ASP.net


 

일단 dotNET을 설치해야할테니, 아래 MS에서 다운로드 가이드를 따라하자.

docs.microsoft.com/ko-kr/dotnet/core/install/

 

Windows, Linux, macOS에 .NET 설치

Windows, Linux, macOS 버전에 .NET을 다운로드하고 설치하는 위치를 알아봅니다. .NET 앱을 개발, 배포, 실행하는 데 필요한 종속성을 검색합니다.

docs.microsoft.com

 

 


Tutorial


설치가 완료하였다면, 아래 튜토리얼에서 테스팅 해보도록 하자.

 

dotnet.microsoft.com/learn/aspnet/blazor-tutorial/create

 

Blazor Tutorial | Build your first app

Step-by-step instructions for building your first Blazor app. Develop with free tools for Linux, macOS, and Windows.

dotnet.microsoft.com

잘 따라했다면, 로컬에서 그림[1]과 같은 페이지를 볼 수 있을 것이다.

 

로컬에서 동작하는 모습. 그림[1]

원격 서버에서 바로 publish해도 되고, 로컬에서 publish하여, 원격 서버에 파일을 전송해도 좋지만, 본 강의에서는 로컬에서 원격 서버로 파일을 전송하는 방법을 채택하도록 하겠음. 혹시나 원격 서버에서 바로 하는 방법도 중간중간 알려드림ㅋ

 


Nginx Install


Nginx를 설치하자.

~$ sudo apt-get install nginx

자세한 것은 하단 링크의 nginx 설치 부분을 참고하면 좋을 것이다.

2kiju.tistory.com/58

 

[nginx, uwsgi, flask] flask를 이용해서 배포해보자.

여러 삽질을 했다.. 그냥 그대로 따라오면 할 수 있도록 써놓겠음. nginx로 배포하고, uwsgi와 소켓으로 통신하게 될 것이다. Flask ~$ pip install flask 파이프로 플라스크 다운로드. 만약 파이프가 없다

2kiju.tistory.com

 

잘 따라왔따면 우리는 원격 서버가 있고, blazor, nginx를 준비한 상태일 거임.

 


Blazor Publish


 

osX에서의 publish
Windows에서의 publish

ubntu와 같이 CLI환경이라면  다음과 같이 publish 할 수 있다.

~$ dotnet publish /var/www

 

게시(publish)가 완료 되었다면 다음과 같은 파일들이 나올 것이다.

이거를 잘 보관해두자.


Nginx Setting


다시, Nginx로 돌아오자.

nginx 설정으로 들어가보자.

~$ vi /etc/nginx/sites-enabled/default

그리고 다음과 같이 설정해준다.

server {
    listen        80;
    server_name   example.com *.example.com;
    location / {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }
}

다음과 같이 nginx 테스트를 한번 해주자.

~$ service nginx restart
~$ nginx -t

 

이제, 서비스를 등록해주어야 할 차례다.

~$ vi/etc/systemd/system/example.service

 

[Unit]
Description=Example. dotnet Website

[Service]
WorkingDirectory=/var/www/[Your work dir path]
ExecStart=/usr/bin/dotnet /var/www/BlazorApp/BlazorApp[Your app name].dll
Restart=always
# Restart service after 10 seconds if the dotnet service crashes:
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=BlazorApp[Your app name]
User=root[User name]
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false

[Install]
WantedBy=multi-user.target

 

이렇게 설정해주도록 하자. 중간에 있는 [] 부분은 알아서 잘 채워넣으셈. ㅂ지우려면 지우고.

 

자, 이제 서비스를 허용해주자.

~$ systemctl enable example.service

배포


 

다음으로, 아까 publish해두었던 데이터들을 위에 지정해둔 경로[Your work dir path]에 옮겨주도록 하자.

나 같은 경우에는 FTP로 서버에 옮겨두는데, 이거 읽는 사람들은 git으로 하던, FTP로 하던, 서버 working dir에 옮겨주면 된다.

 

Filezila로 서버에 옮긴 모습.

그 후, 

~$ systemctl start example.service

서비스를 시작하면 된다.

 

안녕 세상 !

 

궁금한 점은 댓글로 ㄱㄱ