공용 주소에서 액세스 할 수있는 로컬 서버 만들기

저는 10 년 동안 더 나은 웹 사이트를 개발해 왔고, 가장 큰 문제 중 하나는 항상 지역 개발이었고 로컬 사이트를 라이브 테스트에 동기화했습니다. 로컬 환경을 사용하는 것은 빠르기 때문에 좋지만 멀리서 볼 수는 없으며 어딘가에서 데이터베이스 작업, 테이블 이름, 값 등의 이름 바꾸기를 의미합니다..

이 기사에서는 다음과 같은 쉬운 방법을 제시합니다. 로컬 서버 실행 너는 할 수있어. 휴대 전화 및 기타 휴대 기기에서 액세스 기본적으로 인터넷을 통해 방송되기 때문에 좋은 로컬 호스트를 떠나지 않고도 클라이언트와 작업을 공유 할 수 있습니다..

Vagrant를 사용하여 로컬 환경 만들기

잠시 전에 Hongagat에서 Vagrant 사용에 대한 기사를 작성 했으므로 여기서는 기본 내용 만 살펴 보겠습니다. 더 많은 정보를 원하면 기사를보십시오!

시작하려면 VirtualBox와 Vagrant를 잡고 설치해야합니다. 둘 다 무료이며 서버를 실행할 가상 시스템을 만드는 데 사용됩니다..

이제 웹 사이트를 저장할 폴더를 만듭니다. “웹 사이트” 우리의 주요 사용자 디렉토리. 그럴거야. / 사용자 / [사용자 이름] / 웹 사이트 OS X 및 C : / 사용자 / [사용자 이름] / 웹 사이트 Windows에서.

이름이 지정된 새 폴더 만들기 wordpress. 이것이 바로 가상 머신을 만드는 곳입니다. 아이디어는 각 폴더 안에있는 웹 사이트 별도의 가상 컴퓨터가 있습니다. 너는 양철통 하나의 가상 머신에 원하는만큼 많은 웹 사이트를 넣으십시오. 플랫폼별로 그룹화하고 싶습니다. 예 : WordPress, Laravel, Custom

이 튜토리얼의 목적을 위해 저는 워드 프레스 웹 사이트를 만들 것입니다..

내부 WordPress 두 개의 파일을 만들어야하는 폴더, 방랑자 파일 과 install.sh. 이는 가상 시스템을 설정하는 데 사용됩니다. Jeffrey Way는 두 개의 훌륭한 시작 파일을 만들었습니다. Vagrantfile 및 install.sh 파일을 가져올 수 있습니다..

그런 다음 터미널을 사용하여 WordPress 디렉토리 및 유형 방랑자. 상자를 다운로드하여 설치해야하기 때문에 시간이 걸릴 것입니다. 기다리는 동안 50 잔의 WordPress 팁에서 커피 잔을 들고이 게시물을 확인하십시오..

과정이 완료되면 당신은 갈 수 있어야합니다. 192.168.33.21 제대로 게재 된 페이지를 볼 수 있습니다. 콘텐츠 폴더는 WordPress 디렉토리 내의 html 폴더 여야합니다. 이제 파일 추가, WordPress 설치 또는 원하는 다른 작업을 시작할 수 있습니다..

가상 호스트 생성, 도메인 매핑과 같은 자세한 정보는 전체 Vagrant 가이드를 읽는 것을 잊지 마십시오. mytest.dev 등등.

Gulp를 사용하여 같은 네트워크에서 로컬 사이트 열기

사이트를 구축하는 동안 응답성에 대해 고려해야합니다. 브라우저 창을 좁히면 작은 화면을 어느 정도 에뮬레이트 할 수 있지만 같은 경험이 아닙니다. 특히 망막 화면을 믹스에 넣는다면 더욱 그렇습니다..

모바일 장치에서 로컬 웹 사이트를 열고 싶을 것입니다. 장치가 동일한 네트워크에 있으면이 작업을 수행하기가 어렵지 않습니다..

이를 위해 Gulp와 Browsersync를 사용합니다. Gulp는 개발 자동화 도구 인 Browsersync는 로컬 서버를 만들뿐만 아니라 여러 장치에서 스크롤링, 클릭, 양식 등을 동기화 할 수있는 훌륭한 도구입니다.

Gulp 설치

Gulp 설치는 매우 쉽습니다. 지시 사항은 시작하기 페이지로 이동하십시오. 사전 요구 사항 중 하나는 NPM (노드 패키지 관리자)입니다. 이것을 얻는 가장 쉬운 방법은 Node 자체를 설치하는 것입니다. 지시 사항은 노드 웹 사이트를 참조하십시오..

일단 당신이 npm 설치 - 글로벌 gulp 명령을 gulp를 전역 적으로 설치하려면 프로젝트에 gulp를 추가해야합니다. 이 작업을 수행하는 방법은 실행하는 것입니다. npm install --save-dev 꿀꺽 꿀꺽 마심 프로젝트의 루트 폴더에 다음을 추가하십시오. gulpfile.js 거기에 파일.

지금은 그 파일 안에 Gulp 자체를 사용한다는 것을 나타내는 단일 코드 줄을 추가합시다.

var gulp = require ( 'gulp');

Gulp가 스크립트를 연결하고, Sass와 LESS를 컴파일하고, 이미지를 최적화하는 등 모든 멋진 것들에 관심이 있으시면 Gulp To Guide를 읽어보십시오. 이 기사에서는 서버 만들기에 중점을 둘 예정입니다..

Browsersync 사용

Browsersync에는 두 단계로 설치할 수있는 Gulp 확장 프로그램이 있습니다. 먼저 npm을 사용하여 다운로드 한 다음 Gulpfile에 추가합니다..

문제를 제기하십시오. npm은 브라우저 - sync gulp를 설치합니다. --save-dev 터미널의 프로젝트 루트에있는 명령; 확장 프로그램을 다운로드합니다. 그런 다음 Gulpfile을 열고 다음 줄을 추가하십시오.

var browserSync = require ( 'browser-sync'). create ();

이를 통해 Gulp는 Browsersync를 사용할 수 있음을 알게됩니다. 다음은 브라우저 동기화가 작동하는 방법을 제어하는 작업을 정의합니다..

gulp.task ( 'browser-sync', function () browserSync.init (proxy : "192.168.33.21"););

추가되면 입력 할 수 있습니다. 꿀꺽 마심 브라우저 싱크 터미널에 서버를 시작합니다. 아래 그림과 같은 것이 보일 것입니다..

거기에 4 개의 URL이 있습니다. 그 의미는 다음과 같습니다.

노동 조합 지부: 로컬 URL은 실행중인 시스템의 서버에 연결할 수있는 곳입니다. 우리의 경우에는 192.168.33.21 또는 Borwsersync에서 제공하는 것을 사용할 수 있습니다..
외부: 네트워크에 연결된 모든 장치에서 웹 사이트에 연결할 수있는 URL입니다. 로컬 컴퓨터, 휴대 전화, 태블릿 등에서 작동합니다..
UI:이 URL은 현재 실행중인 서버의 옵션을 가리 킵니다. 연결보기, 네트워크 조절 설정, 기록보기 또는 동기화 옵션.
외부 UI: 이것은 UI와 동일하지만 네트워크의 모든 장치에서 액세스 할 수 있습니다..

Browsersync를 사용하는 이유?

이제 우리는이 단계를 마쳤으므로 브라우저 싱크를 전혀 사용하지 않는 이유를 생각할 것입니다. 모든 장치에서 URL 192.168.33.21에 연결할 수 있습니다. 그래도이 URL에 WordPress를 설치해야합니다..

보통 가상 호스트를 사용하고 wordpress.local 또는 myproject.dev와 같은 도메인을 사용합니다. 이것들은 로컬에서 해결되므로 휴대 전화에서 wordpress.local을 방문하고 로컬 컴퓨터에서와 동일한 결과를 볼 수 없습니다.

지금까지는 네트워크에 연결된 모든 장치에서 액세스 할 수있는 테스트 사이트를 보유하고 있습니다. 이제는 세계로 나가 인터넷을 통해 우리 작품을 방송 할 때입니다..

우리 호스트를 공유하기 위해 ngrok 사용하기

ngrok는 로컬 호스트에 보안 터널을 생성하는 데 사용할 수있는 도구입니다. 가입 (아직 무료)하면 암호로 보호 된 터널, TCP 및 여러 개의 동시 터널을 사용할 수 있습니다.

ngrok 설치하기

ngrok 다운로드 페이지로 이동하여 필요한 버전을 가져옵니다. 폴더가있는 곳에서 실행하거나 어디서나 실행할 수있는 위치로 이동할 수 있습니다. Mac / Linux에서는 다음 명령을 실행할 수 있습니다.

sudo mv ngrok / usr / local / bin / ngrok

이 위치가 존재하지 않는다는 오류가 발생하면 누락 된 폴더를 작성하기 만하면됩니다..

ngrok 사용하기

고맙게도이 부분은 매우 간단합니다. Gulp를 통해 서버를 실행하면 사용중인 포트를 살펴보십시오. 위의 예에서 로컬 서버는에서 실행 중입니다. http : // localhost : 3000 이는 포트 3000을 사용 중임을 의미합니다. 새 터미널 탭에서 다음 명령을 실행합니다.

ngrok http 3000

이렇게하면 localhost에 액세스 할 수있는 터널이 만들어 지므로 결과는 다음과 같아야합니다.

옆에 표시되는 URL “전송” 어디서든 웹 사이트에 액세스하는 데 사용할 수있는 기능입니다..

결론

하루가 끝나면 이제 세 가지 일을 할 수 있습니다.

로컬에서 프로젝트를보고 작업하십시오.
네트워크의 모든 장치를 통해 웹 사이트보기
다른 사람들이 간단한 링크로 어디에서나 우리의 작품을 볼 수있게하십시오.

이를 통해 로컬 및 테스트 서버를 동기화하고 데이터베이스 및 기타 걱정스러운 작업을 마이그레이션하기 위해 경주하는 대신 개발에 집중할 수 있습니다..

로컬로 작업하고 결과를 공유하는 다른 방법이 있다면 알려 주시기 바랍니다.!