Ubuntu서버에서 Vue.js + ASP.NET Core 사이트 구축방법

사이트 구축순서

①필요한 모듈을 설치

②폴더를 생성해서 Vue.js와ASP.NET Core 프로젝트를 Publish

③Nginx서비스설정

 

1. 모듈설치

• dotnet모듈설치

#ubuntu 20.04의 경우
wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

#ubuntu 18.04의 경우
wget https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

# dotnet6.0의 경우
sudo apt-get update; \
sudo apt-get install -y apt-transport-https && \
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-6.0

# aspnetcore6.0의 경우
sudo apt-get update; \
sudo apt-get install -y apt-transport-https && \
sudo apt-get update && \
sudo apt-get install -y aspnetcore-runtime-6.0

# dotnet runtime6.0의 경우
sudo apt-get install -y dotnet-runtime-6.0

# .netcore3.1의 경우
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-3.1

• nodejs모듈설치

sudo apt update
sudo apt install nodejs
sudo apt install npm
sudo npm install n -g

2. Vue.js + ASP.NET Core의 사이트 구축

• 프로젝트 publish

mkdir 프로젝트명
cd 프로젝트명
git clone github주소

cd 프로젝트명/Vue.js폴더명
npm run build

cd 프로젝트명/ASP.NET Core폴더명
dotnet publish -c Release -o ~/publish폴더명

• nginx서비스설정

#nginx기본설정수정
sudo vim /etc/nginx/sites-available/default 

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

	root /var/www/html/dist; #Vue.js폴더명

	index index.html;

	server_name _;

	location / {
		try_files $uri $uri/ /index.html;
	}
}
#nginx再起動
sudo service nginx restart