node.ucp 다운로드 node.ucp 소스 코드 다운로드

node.ucp

웹사이트 데이터

1.0.0

다운로드

node.ucp

이것은 Nodejs 및 React 위에 쓰여진 본격적인 동형 자바 스크립트 제어판입니다. 이 제어판의 목적은 본격화되고 매우 유연하기 때문에 다른 사람들을위한 예 또는 보일러 플레이트 코드 역할을하는 것입니다. 다른 사용 사례 및 데이터베이스 유형 및 구조에 쉽게 적응할 수 있도록 코드를 작성했습니다.

서비스 작업자의 휘발성 리소스의 캐시 파열 및이 응용 프로그램의 소스 코드에서 수동으로 세션을 처리하는 서버 측면 렌더링, 반응, 캐시 처리 및 처리와 관련된 많은 문제에 대한 솔루션을 찾을 수 있습니다.

이 코드는 ES6의 화살표 기능을 사용하고 약속을 크게 약속하므로 아직이 개념에 익숙해 지십시오.

소스 코드에서 응용 프로그램의 작동을 설명하기 위해 가능한 한 많은 의견을 제시하려고 노력했지만 상황이 명확하지 않으면 자유롭게 물어보십시오.

데모

로그인 정보 :

사용자 이름 : Jonas

비밀번호 : 테스트

데모를 보려면 여기를 클릭하십시오.

데모가 작동하지 않는 이미지를 보려면 여기를 클릭하십시오.

전제 조건

nodejs v6.11.3 이상
샘플 데이터베이스를 사용하려면 MySQL 버전 5.6.5 이상입니다.
Linux를 사용하는 경우 Node-Gyp를 설치해야합니다. 다음 명령을 사용하여 설치하십시오.

sudo npm install -g node-gyp

Windows를 사용하는 경우 Windows 빌드 도구도 설치하여 일부를 컴파일하고 빌드해야합니다. 다음 명령을 사용하여 설치하십시오.

npm install --global --production windows-build-tools

설치

소스 코드를 배치하려는 빈 폴더로 이동하십시오.
다음 명령을 사용하여 저장소를 복제하십시오.

git clone https://github.com/zeus2198/node.ucp

또는

저장소의 오른쪽 상단에있는 녹색 Clone or Download 버튼에서 저장소를 수동으로 다운로드하고 빈 폴더에서 내용을 추출하십시오. 3. 프로젝트에 루트에 있는지 확인하고 다음 명령을 입력하여 응용 프로그램에서 필요한 패키지를 설치하십시오.

npm install

패키지 설치에는 시간이 걸릴 수 있습니다. 5. 샘플 데이터베이스 ( ./sample-database.sql )를 MySQL 서버로 가져옵니다. 4. ./config/config.json 파일을 열고 시스템 설정에 따라 구성 파일을 편집하십시오.

응용 프로그램 시작

개발자 모드 :

개발자 모드에서 응용 프로그램을 시작하려면 다음 명령을 사용하십시오.

npm run start-dev

개발자 모드에서는 다음과 같은 일이 발생합니다.

./src 폴더 내부의 모든 파일이 변경 될 때마다 응용 프로그램이 자동으로 다시 시작됩니다.
응용 프로그램의 클라이언트-서버 공유 부분은 응용 프로그램 시작시 자동 번들로 제공됩니다.
응용 프로그램은 기본적으로 캐시되지 않은 global.min.css 대신 global.css 사용합니다. 정적 파일을 사용하는 데 nginx 사용하기로 결정한 경우 (나중에 설명 된대로) Nginx 구성에 따라 .CSS 파일을 캐시 할 수 있습니다.
번들 파일의 자동 캐시 파열은 응용 프로그램 재시작에서 발생합니다. 이 캐시 파열은 서비스 작업자 ( ./public/js/sw.js )에 의해 감지 된 다음 번들 파일이 캐시에서 교체됩니다!

생산 모드 :

생산 모드에서 응용 프로그램을 시작하기 전에 클라이언트에게 제공되도록 클라이언트-서버 공유 부분을 한 파일 아래에 묶어야합니다. 다음 명령을 사용하려면 다음 명령을 사용하십시오.

npm run make

위의 명령은 또한 ./public/css/global.css 파일 컨텐츠를 미치고 ./public/css/global.min.css 로 저장합니다.

번들링이 완료된 후 다음 명령을 사용하여 응용 프로그램을 시작하십시오.

npm start

생산 모드에서는 다음과 같은 일이 발생합니다.

응용 프로그램은 캐시 된 리소스 인 global.min.css global.css 합니다.
번들 파일에 대한 캐시 파열은 여전히 진행되지만 npm run make 명령을 사용하여 생성 된 번들 파일에 대해서만 발생합니다.
Express (응용 프로그램에 사용 된 웹 서버 API) 프로덕션 모드가 활성화되어 있습니다.

작품

이 프로젝트에서 사용 된 아트 워크의 Photoshop 파일을 여기에서 찾을 수 있습니다.

메모

./src/shared/ 디렉토리에는 클라이언트 및 서버 부분에 공통적 인 코드가 포함되어 있으므로이 섹션에서 민감한 정보를 노출시키지 마십시오.
이 응용 프로그램은 LocalHost 및 HTTPS 지원 도메인에서만 작동하는 서비스 작업자를 사용하므로 도메인과 함께 HTTPS 프로토콜을 사용하고 있는지 확인하십시오.
~~보호 된 경로는 서버 측에서 렌더링되지 않습니다.~~
캐시를 지우 려면 ./public/js/sw.js 열고 버전 문자열을 편집하십시오. 그런 다음 브라우저에서 열린 모든 응용 프로그램 탭을 닫고 응용 프로그램을 다시 엽니 다. 이것을 사용하여 global.css 파일을 편집 할 때 global.min.css 클릭하십시오.
무료 SSL 인증서를 받고 NGINX를 사용하여 응용 프로그램에 도메인을 역전시킵니다.

다른 데이터베이스 사용

./src/db/db.api.abstract.js 파일에는 데이터베이스 API의 초록 클래스가 포함되어 있으며 메소드 사양에 대한 주석을 읽습니다. 그런 다음이 파일을 사용자 정의 데이터베이스 API 계층에 요구하고 추상 방법을 대체하십시오. 구현 예는 ./src/db/mysql.api.js 파일을 참조하십시오. 각 방법은 약속을 반환해야합니다.

DB 용 API를 작성한 후에는 ./config/config.json 으로 이동하고 databaseAPI 옵션을 편집하여 DB API 레이어가 포함 된 파일 이름과 일치하십시오. 파일은 ./src/db/ 디렉토리에 배치해야합니다.

nginx를 사용하여 정적 파일을 제공합니다

nginx를 사용하여 nodejs 대신 정적 파일을 제공하는 것이 좋습니다. 이렇게하려면 다음 위치 블록을 Sever Block 구성에 추가 할 수 있습니다.

 location /public {
	alias  /path/to/your/app/public;
}

정적 파일을 제공하기 위해 Nginx와 함께 이동하기로 결정한 경우 응용 프로그램의 GZIP 압축을 Nginx로 전환하고 싶을 수도 있습니다. 그렇게 해야하는 경우 ./node.ucp.js 파일에서 다음 두 줄을 댓글을 달아 응용 프로그램 측에서 압축을 비활성화하십시오.

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;