백엔드를 'ASP.NET Core 6', 프론트 엔드를 리액트로 구성하려는데
대부분의 예제가 각각 구성하는 방식이거나 'VS Code'로 구현하는 방식이었습니다.
그래서 저는 한번에 구성하여 관리하는 프로젝트를 만들려고 이렇게 했습니다.
비주얼 스튜디오라고 적어놨지만 'VS Code'와 협업하도록 구성하는 것이 목적이라
'VS Code'에서도 사용할 수 있습니다.
하나의 포스팅으로 썼더니 너무 길어서 분할합니다.
1. 구성 개요
완성된 프로젝트 : github - dang-gun/AspDotNetSamples/ReactTest/
이 포스팅에서는 가급적 '복사 + 붙여넣기' 만해서 사용하도록 작성하였습니다.
이 프로젝트는 "React.js를 사용한 ASP.NET Core" 템플릿 사용하지 않는 프로젝트입니다.
이 구성이 템플릿을 사용하지 않는 것보다 좋은지는 좀 고민이 있습니다.
폴더 구조는 'ASP.NET Core'를 따라갑니다.
그래서 출력 폴더는 'wwwroot'로 되어 있습니다.
테스트할 때 'ASP.NET Core'의 로컬 서버에서 논스톱으로 테스트를 할 수 있도록 구성합니다.
(참고 : [ASP.NET Core 6] 프론트 엔드(Front-end) 개발환경과 통합)
'wwwroot'에 직접 접근할 때 페이지를 이동시켜주는 'index.html'가 있습니다.
'wwwroot/development' : 개발 빌드
'wwwroot/production' : 배포 빌드
* 이렇게 개발/배포 폴더를 나누는 것은 배포할 때 하는 실수를 막기 위해서입니다.
각자 판단에 따라서 웹 루트에 그냥 출력하셔도 됩니다. *
'React'의 기본 템플릿은 'src'에 있습니다.
'src/index.html'
이미지는 'src/images'에 넣어 사용하도록 구성되어 있습니다.
출력할 때 'images'폴더에 이미지 파일들이 정리되어 들어갑니다.
포함되있는 패키지는 "2. 'package.json' 작성"에서 다룹니다.
CSS와 SASS는 번들링 합니다.
배포 모드에서는 미니마이즈하고 개발 모드에서는 하지 않습니다.
소스맵 기능이 활성화 되어 있습니다.
2. 프로젝트 생성
비주얼 스튜디오에서 'ASP.NET Core 6'로 프로젝트를 생성합니다.
이건 나중에 백엔드를 'ASP.NET Core 6'으로 사용하려고 하는 목적입니다.
백엔드를 다른 것으로 사용하려면 굳이 'ASP.NET Core 6'로 생성할 필요는 없습니다.
'VS Code'의 경우 'C#' 확장을 설치해야 합니다.
(참고 : [VS Code] 'VS Code'에서 'ASP.NET Core 6' 프로젝트 열고, 수정하기)
2-1. 프로젝트 생성
생성할 템플릿 : ASP.NET Core Web API
다음 폴더를 추가합니다.
wwwroot
src
시작 페이지 수정
프로젝트를 생성할 때 "OpenAPI 지원 사용"을 했다면 자동으로 시작페이지가 스웨거(swagger)로 설정됩니다.
이것을 다른 페이지로 보내려면
Properties > launchSettings.json
에서 'launchUrl'의 '스웨거' 항목을 주석처리 해줍니다.
2-2. 'Program.cs' 수정
이 프로젝트에 맞게 기능을 추가해야 합니다.
using Newtonsoft.Json.Serialization;
var builder = WebApplication.CreateBuilder(args);
#region ConfigureServices
//API모델을 파스칼 케이스 유지하기
builder.Services.AddControllers().AddNewtonsoftJson(options => { options.SerializerSettings.ContractResolver = new DefaultContractResolver(); });
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
#endregion
#region Configure
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{//개발 버전에서만 스웨거 사용
app.UseSwagger();
app.UseSwaggerUI();
}
//3.0 api 라우트
app.UseRouting();
//https로 자동 리디렉션
app.UseHttpsRedirection();
//기본 페이지
app.UseDefaultFiles();
//wwwroot
app.UseStaticFiles();
app.MapControllers();
app.Run();
#endregion
누겟에서 'Microsoft.AspNetCore.Mvc.NewtonsoftJson'를 찾아 설치합니다.
이제 'wwwroot'폴더에 'index.html' 파일을 만들어 넣고
실행하면 'index.html'가 표시됩니다.
2-3. 필요없는 파일 제거
'WeatherForecast.cs', 'WeatherForecastController.cs'를 제거합니다.
2-4. 테스트용 코드 생성
테스트용 컨트롤러를 만들어 줍니다.
namespace ReactTest.Controllers;
[Route("api/[controller]/[action]")]
[ApiController]
public class TestController : ControllerBase
{
/// <summary>
/// 무조건 성공
/// </summary>
/// <returns></returns>
[HttpGet]
public ActionResult SuccessCall()
{
ObjectResult apiresult = new ObjectResult(200);
apiresult = StatusCode(200, "성공!");
return apiresult;
}
}
테스트용으로 사용할 컨트롤러를 만들어 줍니다.
3. 테스트
이제 실행시키면 'index.html'파일의 내용이 나와야 합니다.
4. 웹 루트 지정하기
'ASP.NET Core'의 기본 웹 루트는 'wwwroot'입니다.
하지만 'React 5'를 세팅할 때 출력 폴더를
- development : 개발 빌드
- production : 배포 빌드
로 나눠서 출력하도록 구성할 예정입니다.
그러니 테스트할 때는 'development'폴더를
배포할 때는 'production' 폴더를 사용하도록 구성합니다.
'Program.cs'에 다음 코드를 넣습니다.
(참고 : [ASP.NET Core] 웹 루트(web root)를 변경하거나 시작 폴더 변경하기 )
//웹 루트
//app.UseStaticFiles();
if (app.Environment.IsDevelopment())
{
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, @"wwwroot\development")),
});
}
else
{
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, @"wwwroot\production")),
});
}
웹 루트 폴더 정리
위와 같이 설정하면 가장 문제가 몇 가지 있는데....
- 퍼블리싱(개시, publishing)할때 웹 루트 폴더가 그대로 출력된다.
- 웹 루트 폴더로 들어가는 경로가 한 단계 추가 된다.
저는 웹 루트 내용도 배포전에 백업해 두기 때문에
폴더가 한 단계 더 생겨도 관리하는 데는 더 편해서 이렇게 하는 것입니다.
각자 판단에 맞게 구성하시면 됩니다만
이 프로젝트는 이 구조를 기준으로 작성됩니다.
마무리
지금은 'NPM Task Runner'가 최상위 폴더만 인식하고 있어서 이렇게 구성을 했지만
'NPM Task Runner'가 업데이트된다면 구성이 좀 달라질 수 있습니다.
