ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Internet] Mac 내장 Apache로 웹서버 운영하기
    생활코딩/WEBn 2020. 8. 21. 21:02

    [강의 출처] opentutorials.org/course/3084/18894

     

    웹서버 운영하기 : 맥 - 생활코딩

    자신의 운영체제에 맞는 수업을 찾아서 학습해주세요. 맥에 웹서버 설치하기 웹서버와 http  웹브라우저와 웹서버의 통신 --- 맥에 웹서버 설치 이번 시간에는 아파치 웹서버를 맥 컴퓨터에 설치

    opentutorials.org

    기타 참고페이지들은 본문에 적어두었다.


     

    생활코딩 Web1 Internet편에 직접 웹서버를 운영해보는 단계가 있다.

    생활코딩에서는 bitnami라는 프로그램을 통해 실습을 하는데, 아래와 같은 문구가 있는 게 아닌가.

     

    "맥에는 아파치가 기본적으로 깔려있습니다. 그래서 실습을 하기가 무척 쉽습니다."

     

    그래서 직접 해보기로 했다. 맥에 기본적으로 깔려 있는 아파치로 웹서버를 돌려보자!

     

    Mac 내장 Apache로 웹서버 운영하기

     

    우선 먼저 Google 검색을 해보았다. '맥 아파치'.

    여러 글들이 많이 나오는데, 가장 많이 참조한 것은 이쪽:

    xho95.github.io/macos/apache/webserver/mod_wsgi/2016/10/02/Apache-WebServer.html

    88240.tistory.com/476

     

    1. 맥 터미널에서 '아파치'와 'php' 버전을 확인한다.

    $ apachectl -v
    $ php -v

    내 경우에는 아파치 2.4.41 버전, php 7.3.11 버전이 설치되어 있었다.

     

    2. 아파치를 실행한다.

    $ sudo apachectl start

    sudo 권한이라서 password를 묻는 단계가 있다. 접속한 맥 계정 비밀번호를 입력하니 확인완료.

     

    3. 브라우저에서 localhost로 접속해본다. (혹은 127.0.0.1)

    사파리에서 localhost를 입력한 결과. 아파치의 기본 indexl.html 파일이다.

    무사히 출력된다! 아파치 서버 활성화가 무사히 끝났다. 이제는 실습에서 만들었던 웹페이지를 띄워볼 차례.

     

    4. index.html 파일 찾기 (생활코딩 Web1 웹서버 실습)

    먼저 아까 출력되었던 'It works!' 파일이 어디에 있는지 알아보았다.

    /Library/WebServer/Documents 디렉토리라고 한다. 해당 디렉토리로 이동 후 Finder로 열어보았다.

    $ cd /Library/WebServer/Documents
    $ open .

    해당 디렉토리로  이동하니, 이런 이름의 파일이 있다.

    /Library/WebServer/Documents/index.html

    에디터로 열어보니, 아래와 같이 작성되어 있다. html문서다.

    <html><body><h1>It works!</h1></body></html>
    

    생활코딩에서 실습했던 방법을 생각해보면,

     

    "htdocs 디렉터리의 파일들을 모두 삭제하고, 프로젝트 폴더에 있는 파일을 복사합니다."

    여기의 index.html 파일만 교체해도 목적은 이룰 수 있을 것 같다. 시도해 본다.

    index.html.en 파일을 다른 곳으로 이동하고, 내가 작성했던 파일을 복사해온 다음, 다시 localhost에 접속해보았다.

    생활코딩 Web1을 들으면서 직접 만들었던 웹페이지.

    성공! 링크로 연결해뒀던 페이지들 간의 이동도 의도대로 잘 실행되었다.

    와이파이로 연결되어있는 스마트폰으로도 접속해보았다. 무사히 실행된다!

    여기까지 하면 생활코딩 범위는 끝.

     

    문제는... 이 루트는 일반적인 방법으로 파일 삭제가 안 될 뿐더러, 웹서버는 이렇게 운영하는 게 아닐 것 같다는 불안감이 든다는 것.

    아까 테스트했던 파일들은 급한대로 sudo rm으로 하나하나 지웠다. 그냥 rm을 입력하면 Permission denied가 뜬다.

    $ sudo rm index.html

    다른 사람들은 환경설정을 어떻게 하는지 좀 더 알아보기로 했다.

     

    5. 환경설정 하기: userdir 활성화하기  or  DocumentRoot 폴더 변경하기

    보통은 위의 두 가지 방법으로 세팅을 하는 것 같다. 나는 이 중 userdir 활성화를 택하기로 했다.

    userdir 활성화의 이점은 localhost/~username처럼 하위 링크를 얻을 수 있다는 것. 방법은 아래와 같다.

     

    1. /private/etc/apache2/extra 디렉토리의 httpd-userdir.conf 파일을 편집

    $ cd /private/etc/apache2/extra
    $ sudo vi httpd-userdir.conf

    -httpd-userdir.conf 파일에서 '# Include /private/etc/apache2/users/*.conf' 부분의 주석처리(# )를 삭제

     

    마찬가지로 sudo 권한이라서 password 요청이 들어올 수 있다. 패스워드를 입력하면 vi 편집기가 뜬다.

    vi 편집기에 익숙하지 않아서 조금 헤맸는데, 그래도 아래 링크 등을 참고하면 금방 적응할 수 있다.

     

    coding-factory.tistory.com/505

     

    [Linux] 리눅스 문서 편집기 vi 사용법 & 명령어 총정리

    파일을 작성하거나 수정하기 위해서는 편집기가 필요합니다. 윈도우에서는 메모장을 편집기의 기본으로 지원하는 반면 리눅스에서는 기본 편집기로 vi 라는 편집기를 지원합니다. vi는 리눅스��

    coding-factory.tistory.com

    마우스를 사용하는 시스템이 아니라서, 키보드로 지금 명령을 할지 입력을 할지를 지정해줘야 한다. 커서 이동은 방향키로도 가능하다.

     

    처음 써본다면 esc, i, :만 기억하면 된다.

    화살표키를 이용해서 편집할 곳으로 커서를 이동한 다음, 키보드 상에서  'i'키 를 누르면 화면 맨 아랫줄에

    -- INSERT --

    라는 표시가 뜬다. 그 상태에서는 텍스트 입력 및 수정이 가능하다.

    수정이 끝났다면 esc를 누르고 나서, ':'를 누르자. (쉬프트도 눌러줘야 한다) 그러면 다시 화면 맨 아랫줄에

    :

    라는 표시가 뜰 것이다. 저장하고 종료할 거라면, 아래처럼 : 뒤에 wq를 입력하고 엔터를 누르면 된다.

    :wq

    다시 터미널 기존 위치로 돌아갈 것이다. 혹시 강제종료하고 싶다면 wq 대신에 q!를 입력하면 된다.

     

    2. /private/etc/apache2 디렉토리의 httpd.conf 파일을 편집

    내 경우에는 위의 경로에 httpd.conf 파일이 있었다. 이번에는 Atom으로 열어서, 우선 아래 두 줄의 주석처리(#)를 제거하고,

    LoadModule userdir_module libexec/apache2/mod_userdir.so
    Include /private/etc/apache2/extra/httpd-userdir.conf

    혹시 모를 ServerName 관련 오류를 피하기 위해, 주석을 제거하고 ServerName 설정을 변경하고 저장했다.

    (Atom의 경우, 저장할 때 Atom Helper가 권한 관련하여 비밀번호를 요청할 수 있다.)

    ServerName localhost

     

    3. Sites 폴더 생성

    localhost/~username 요청시 베이스로 사용할 디렉토리를 만드는 작업이다.

    /Users/유저명 의 유저명 경로에 Sites 폴더를 만들면 된다. 나는 터미널을 이용했다.

    $ cd ~
    $ mkdir Sites

     

    4. Sites 폴더에 접근 권한 주기

    /private/etc/apache2/users 경로에 유저명.conf 파일을 만들어주는 작업이다. Guest.conf 파일을 복사해서 내용만 수정해도 된다.

    여기서 꽤 고전했다. conf 파일의 내용은 여기를 참고해서 아래와 같이 작성했다.

    <Directory "/Users/username/Sites/">
      Options Multiviews Indexes
      Require all granted
    </Directory>
    

    첫번째 줄의 username을 내 계정명으로 변경한 상태로 저장하고, 아파치를 재시작 후 접속을 시도해보았더니

     

    권한이 없어서 접속할 수 없다는 오류페이지. 흔히 말하는 403 에러인듯.

     

    에러 로그를 찾아보니 이런 메시지가 뜬다.

    cat /var/log/apache2/error_log # 에러 로그를 찍어보자
    
    (13)Permission denied:  AH00035: access to /~username denied (filesystem path '/Users/username/Sites') because search permissions are missing on a component of the path

    구글의 도움을 받아 아래와 같은 해결법을 찾았다.

     

    mytory.net/archives/3143

     

    아파치 Forbidden You don’t have permission to access / on this server. 에러 해결

    아파치에서 웹 서버의 폴더에 접근할 수 없어서 뜨는 에러다. 우선 아파치 환경 설정에서 해당 폴더 접근을 허용하고, 아파치 사용자에게 폴더의 실행 권한과 파일의 읽기 권한을 줘야 한다.

    mytory.net

    터미널로 이동해서 Sites 폴더에 권한 755를 부여했다.

    $ cd ~
    $ sudo chmod 755 Sites

    755 권한은 소유자는 읽기, 쓰기, 실행이 가능하고, 그 외 사용자는 읽기, 실행이 가능한 타입.

    여전히 Forbidden이다.

     

    apple.stackexchange.com/questions/95660/how-to-fix-403-in-mac-os-x-built-in-apache/136941#136941

     

    How to fix 403 in Mac OS X built-in Apache?

    I'm trying to set a local environment on my new MacBook Air 13": built-in Apache with my own DocumentRoot, PHP, and MySQL. I usually update /etc/hosts just to run my local websites with a pretty

    apple.stackexchange.com

    httpd.conf 파일의 User 이름을 변경해서 해결할 수 있다고 한다.

    User _www

    해당 파일을 확인해보니 실제로 User명이 _www로 되어있다. _www를 사용자명으로 변경했다.

    그리고 해당 답변자가 추가로 조언해준 보안 이슈를 해결하고 나서

    Listen 80

    ->

    Listen 127.0.0.1:80

    아파치를 재실행해본다.

    $ sudo apachectl restart

    http://localost/~username/index.html로 접속에 성공했다

    결과는 성공!

    와이파이 환경 내에서 접속하려면 위의 Listen 127.0.0.1:80 부분을 Listen 80으로 그대로 두어야 한다.

    '생활코딩 > WEBn' 카테고리의 다른 글

    [CSS] 레이아웃: Box Model, Grid  (0) 2020.08.25
    [CSS] Selector: class, id  (0) 2020.08.24
    [CSS] 정의, Selector, Declaration, Property, Value  (0) 2020.08.24
    [Internet] 개요  (0) 2020.08.21
    [HTML] 개요  (0) 2020.08.20

    댓글

Designed by Tistory.