개발노트/포트폴리오사이트

나만의 포트폴리오 웹페이지 만들기 - 3 (로컬세팅)

2019. 6. 3. 16:04
728x90
반응형

로컬(작업컴퓨터)에서 웹페이지 코드를 수정하고 웹서버에 연동하여 개발을 진행하기 위해 

 

XAMPP(Apache) / VS Code(Editer) 설치 및 가상호스트 설정을 하였습니다.

 

 

■ 프로그램 설치

 

 - XAMPP : https://www.apachefriends.org/download.html

 

Download XAMPP

Includes: Apache 2.4.39, MariaDB 10.1.40, PHP 7.1.29 + SQLite 2.8.17/3.7.17 + multibyte (mbstring) support, Perl 5.16.3, ProFTPD 1.3.4c, phpMyAdmin 4.8.5, OpenSSL 1.0.2r, GD 2.0.35, Freetype2 2.4.8, libpng 1.5.26, gdbm 1.8.3, zlib 1.2.11, expat 2.0.1, Sabl

www.apachefriends.org

 - VS Code : https://code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

 

■ 가상호스트 설정

 

 웹서버에서 도매인을 연결하여 웹 브라우저로 웹페이지를 여는 것처럼 로컬에서도 가상호스트 설정을 통해 도메인으로  웹페이지를 확인할 수 있습니다.

 

 - hosts 설정 (경로 : C:\Windows\System32\drivers\etc)

hosts파일 하단에 stage.test.devs로 연결 시 127.0.0.1(localhost)로 연결되도록 설정

 

 - httpd.conf 설정 (경로 : C:\xampp\apache\conf)

외부에서 D:project 디렉토리 접근권한 허용

<Directory "D:/project">
   AllowOverride None
   Require all granted
</Directory>

 

 - httpd-vhost.conf 설정 (경로 : C:\xampp\apache\conf\extra)

stage.test.devs 접근 시 D:\project/test 디렉토리로 접근하도록 설정

<VirtualHost *:80>
	##ServerAdmin webmaster@dummy-host.example.com
	DocumentRoot "D:/project/test"
	ServerName stage.test.devs
	ServerAlias stage.test.devs
	##ErrorLog "logs/dummy-host.example.com-error.log"
	##CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>

 

 

가상호스트 설정이 모두 완료된 후 XAMPP Apache를 재시작하게 되면 브라우저에서 http://stage.test.devs 주소 접근 시 D:\project\test 폴더 내부의 index파일을 볼 수 있습니다.

 

php -> echo "Welcome";

 

 

여기까지 작업환경 설정이 완료되었습니다. 

 

다음에는 작업환경과 웹서버 연동을 위한 git hub 설치에 대해 포스팅하겠습니다.

728x90
반응형
저작자표시 (새창열림)
'개발노트/포트폴리오사이트' 카테고리의 다른 글
  • 나만의 포트폴리오 웹페이지 만들기 - 5 (CodeIgniter)
  • 나만의 포트폴리오 웹페이지 만들기 - 4 (Git 연동)
  • 나만의 포트폴리오 웹페이지 만들기 - 2 (서버세팅)
  • 나만의 포트폴리오 웹페이지 만들기 - 1 (시작하기)
KimBY
KimBY
웹개발과 관련된 개발지식 모음
KimBY
B.Y Kim의 개발노트
KimBY
전체
오늘
어제
  • 분류 전체보기 (99)
    • 사소한 개발지식 (49)
      • PHP (2)
      • JavaScript (15)
      • NodeJS (0)
      • JAVA (2)
      • 잡?지식 (4)
      • 로드맵(FE) (22)
      • React (4)
    • 개발노트 (6)
      • 포트폴리오사이트 (6)
    • 프로그래머스 (33)
      • Level1(JS) (0)
      • Level2(JS) (33)
    • 백준알고리즘 (11)
      • 단계별로 풀어보기3(for문) (11)
    • 잡담 (0)

인기 글

최근 글

최근 댓글

태그

  • javascript
  • Level2
  • 로드맵
  • FE로드맵
  • frontend
  • 단계별로풀어보기
  • CSS
  • react
  • 프로그래머스
  • 백준알고리즘
hELLO · Designed By 정상우.
KimBY
나만의 포트폴리오 웹페이지 만들기 - 3 (로컬세팅)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.