웹문서로 html 파일을 열어, 내가 작업한 결과를 보고 싶은데, 정적인 화면만 보여질 뿐, 자바스크립트로 동적인 컨텐츠는 작동을 하지 않더라. 그동안은 vscode의 live server의 확장팩을 이용해서 사용했었는 데, 내 서버에서도 돌아가게끔 해보려니, 안된다.
애초에 원리도 모르고, 그냥 편하다 해서 사용했으니 당연한건가.
찾아보니, 내가 제대로 html 파일을 열었다는 전제하에, 로컬 서버를 사용하여, HTML 파일을 서버에 올려 열어야한다. 그리고 웹 브라우저에서 해당 서버 주소를 입력하여 접속한다. 이 경우 웹 브라우저는 보안상의 이유로 로컬 파일에서 자바스크립트를 실행하지 않지만, 서버에서 제공되는 HTMl 파일은 보안이슈가 없으므로 자바스크립트가 동작한다.
HTML 파일을 서버에 올리는 법
가장 간단하고 흔한방법은 FTP(File Transfer Protocol)을 이용하여 파일을 업로드 하는 것이지만, 다른 방법도 있다.
1. 클라우드 서비스 이용
대표적으로 AWS,Google Cloud Platform, Microsoft Azure등이 있다. 각 클라우드 서비스는 호스팅 서비스를 제공, 서버를 구축하고 파일을 업로드 하는 방법은 각 서비스마다 다르다.2. 웹 호스팅 서비스 이용웹 호스팅 서비스는 서버를 제공하고, 사용자가 원하는 도메인 이름으로 웹사이트를 등록할 수 있도록 도와주는 서비스: WordPress, Wix, Squarespace, Weebly등이 있다.3. 직접 서버 구축HTML 파일을 호스팅 하기 위해서는 서버를 구축해야한다. 이 경우 운영체제에 따라 Apache, Nginx, IIS등의 웹 서버를 설치하고, 해당 서버에 파일을 업로드 하여 호스팅 할 수 있다.
이 중에서 나는 Nginx로 진행해볼까 한다.
1. nginx 설치
http://nginx.org/en/download.html
nginx: download
nginx.org
난 윈도우에서 진행하므로, 위의 버전을 설치한다.
2. 압축 해제 및 nginx.exe 실행
막상 클릭하면, 아무일도 일어나지 않는다.
3. 웹브라우저에서 http://localhost/ 로 들어가면, nginx에 관련한 페이지가 나온다고 하는 데,
나는 오류가 생기더라
찾아보니 아래의 몇가지 오류를 설정해야한다.
3.1 설정파일의 경로는 일반적으로 C:\nginx\conf\nginx.conf 에 위치해있다. 해당 경로로 설정되도록 조치하자.
3.2 명령 터미널에서 C:\nginx폴더로 진입한 다음, 아래 명령어로 Nginx가 제대로 실행되고 있는지 확인하자.
C:\nginx>nginx -tNginx가 유효하다면 "text is successful"이라는 메시지가 나타난다.
하지만, 나는 "test failed"라는 문구가 나왔고, 애초에 경로에 있는 파일인 nginx.conf 파일에 들어가본다.
아래처럼 80포트는 웹서비스의 기본 포트이기 때문에 인터넷 서버로 사용하기 위해서는 반드시 80포트를 이용해서 서비스를 해야 도메인만으로 서비스가 가능하다한다.
온라인에서 찾은 대로, 다른 프로그램이 포트 80을 사용하고 있는지 확인하기 위해 cmd 창에 아래 명령어 입력
netstat -ano혹은 바로 포트 80을 사용하고 있는 PID를 찾기 위해 cmd에 아래 명령어를 입력
netstat -ano | findstr :80
근데 PID 4는 Windows에서 시스템 프로세스(System Process)를 나타내며, 시스템의 다양한 서비스와 드라이버 등을 실행하는 데 사용된다. 이 프로세스는 보통 다른 프로세스보다 더 높은 우선 순위로 실행되어 시스템 안정성을 유지한다.
만일 Nginx를 실행할 때, 시스템 프로세스인 PID 4가 이미 80번 포트를 사용 중이라면, Nginx가 해당 포트를 사용할 수 없다. 이 경우에는 다른 포트 번호를 사용하거나, 시스템 프로세스가 사용하는 80번 포트를 해제하거나, Nginx를 실행하는 계정에 관리자 권한을 부여하여 문제를 해결할 수 있다고 한다.
현재 PID 4의 서비스 이름이 System으로 이 서비스를 중지하면, 시스템 전반을 큰 영향을 미칠 수 있다한다.
하지만 기본적으로 웹서비스의 기본 포트가 80이기 때문에, 인터넷 서버로 사용하기 위해서는 반드시 포트80를 이용해서 서비스를 해야 도메인만으로 서비스가 가능하다.
3.1 관리자 권한으로 실행하여, 아래 명령어를 사용하여 PID 4 서비스를 중단한다.
참고로 윈도우에서 관리자 권한으로 실행은, 프로그램 아이콘에 오른쪽 마우스를 클릭하여 '관리자의 권한'으로 실행하면 된다.
net stop http
3.2 컴퓨터를 재시작하니, net stop http 명령을 재실행해야하는 번거로움 때문에, 80포트가 영구 sindows server가 사용하지 않도록 하기 위해서는 아래명령어를 실행한다.
sc config w3svc start= disabled4. nginx.exe를 클릭하여 실행한다.
정상으로 작동하면 웹 브라우저 http://localhost에 아래와 같은 페이지가 나온다. 드디어..
5. 웹서버 기본 경로를 정해주려면 conf/nignx.conf 파일을 열어서 경로를 본인이 원하는 html 파일이 있는 곳으로 경로 설정한다.
그리고 앵간하면 열고자 하는 파일이름이 index.html이 좋다.
6. 경로를 설정했는 데 http://localhost에 내가 설정한 파일이 나타나지 않았다 싶으면, cmd에 아래 명령어 입력 후에 다음에 웹브라우저를 새로고침 해본다.
nginx -s reload
참고로, 다른 명령어는 아래와 같다.
| start nginx.exe | nginx 시작 |
| nginx -s stop | 강제 종료(shut down quickly) |
| nginx -s quit | 안전 종료(shut down gracefully) |
| nginx -s reload | nginx 재구동. configuration을 reload해 새로운 worker process를 시작하고, 기존 worker process는 안전하게 종료시킴. (reload configuration, start the new worker process with a new configuration, gracefully shut down old worker processes.) |
| nginx -s reopen | 로그 파일을 다시 쓴다 |
<끝>