Synology > Docker > Nginx 를 이용해서 VScode 로 편집하기 (GitHub로 파일관리) 홈페이지 제작하기

Synology에 Docker를 설치한다.

Docker 패키지를 설치하다.

 

Docker에 Nginx 컨테이너를 추가한다.

 

도커 어플을 실행한 후 레지스트리에서 nginx 이미지 파일을 다운로드 한다.

 

이미지탭에서 다운로드된 이미지를 선택한 후 실행을 클릭해서 컨테이너를 추가한다.

 

컨테이너 생성창에서 컨테이너 이름을 넣고 다음을 클릭한다.

 

기본 세팅된 값으로 적용을 클릭하면 컨테이너가 생성된다.

 

Nginx 컨테이너 세팅하기

Nginx1 컨테이너가 실행중인 모습니다.

>> 오른쪽 스위치를 off 시킨 상태에서만 편집이 가능하다.

편집화면 > 일반설정 화면

 

컨테이너 안에 있는 폴더와 외부폴더(Synology폴더)와 마운트 시키기

 

1. Synology > docker 폴더에 nginx1 폴더 생성하기

 

2. 아래 화면처럼 마운트 시킨다.

볼륨 > 폴더 추가 > 아래내용추가 > 적용

 

3. 포트 설정

 

기본적인 세팅을 끝났다.

 

Synology ftp 설정 및 docker 읽기쓰기 권한 추가

1. 제어판 > 파일 서비스 > FTP 활성화 체크

 

2.  제어판 > 사용자 > docker 폴더 읽기/쓰기 권한추가

ftp 사용자 계정을 별도로 만들거나 본인 아이디 계정으로 docker 폴더에 읽기/쓰기 권한을 부여한다.

 

 

 

GitHub에 Repository 추가하기

https://github.com/ 에 파일을 보관하고 관리할 저장소를 생성한다.

vscode 에서 작성한 파일을 github 에서 관리

 

 

vscode에서 ftp 연결 및 파일 추가하기

1. vscode ftp-kr 접속 세팅

명령파레트 ftp-kr:init 입력 후 아래 내용 추가

remotePath 에 "docker/ngin1" 입력 후 저장한다.

 

2. index.html 파일을 생성해서 업로드 시킨다.

3. 중요한 사항

업로드 후 ftp-kr 폴더에 보이는 파일을 클리하면 에러가 발생한다. 에러인것 같다. 따라서 서버에서 다운로드 후 로컬에서 변경하고 다시 업로드해서 변경을 진행해야 한다. 로컬에서 추가 또는 변경 한후 업로드 해야 한다.

 

Docker Nginx 리부팅 후 홈페이지 확인해 보기

모든 준비사항은 끝났다.

컨테이너 스위치를 on 시키고 이제 접속해 보자.

웹브라우져에서 synologyIP주소:8080 또는 synology 에 세팅된 도메인주소:8080 으로 접속하면 된다.

 

vscode에서 html 파일 추가하고 synology docker 폴더에 업로드 하면 된다.