Nodejs를 사용하여 html, css, JS와 같은 정적 리소스 파일에 액세스하는 서버를 구축하는 방법-JS 튜토리얼-php.cn

Nodejs를 사용하여 html, css, JS와 같은 정적 리소스 파일에 액세스하는 서버를 구축하는 방법

不言

풀어 주다： 2018-06-12 14:08:26

원래의

3904명이 탐색했습니다.

이 글에서는 주로 Nodejs를 사용하여 html, css, JS 등과 같은 정적 리소스 파일에 액세스하는 서버를 구축하는 관련 지식을 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터로 살펴보겠습니다

가까운 매장의 기능을 테스트하기 위해서는 테스트용 서버를 구성해야 합니다. 원래는 Apache를 사용할 계획이었는데, Nodejs를 오랫동안 사용하지 않았는데, 제가 배운 지식을 활용해 직접 구성해 보는 건 어떨까요?

직원이 일을 잘하고 싶다면 첫 번째 단계는 먼저 도구를 갈고 닦는 것입니다. node+express를 사용하여 서버를 구성하려고 하기 때문에 컴퓨터에 서버가 없으면 당연히 이 두 가지 큰 보물을 먼저 설치해야 합니다.

1. 노드를 설치합니다. Node 공식 웹사이트로 이동하여 다운로드하고 설치한 후 다음 단계로 이동하면 완료됩니다.

2.npm 프로젝트를 초기화합니다. 터미널을 열고 npm init -y를 입력하세요. 참고: -y를 입력하지 않으면 일부 구성을 직접 작성해야 합니다. -y를 입력하면 기본적으로 package.json 파일이 직접 생성됩니다.

3. 익스프레스를 설치하세요. 터미널에 npm i S express를 입력하고 Enter를 누르세요

두 번째 단계는 Express 구성 파일을 작성하는 것입니다. 새 app.js 파일을 만듭니다(파일 이름은 임의로 지정할 수 있지만 키워드를 사용하지 마세요)

var express = require(&#39;express&#39;);
var path = require(&#39;path&#39;);
var app = express();

[color=#ff0000]app.use(express.static(path.join(__dirname, &#39;public&#39;)));[/color]

app.listen(4444, function() {
 console.log(&#39;App listening at port 8080;&#39;);
});

로그인 후 복사

가장 중요한 부분은 app.use(express.static(path.join(__dirname, 'public')))입니다. 이 코드 줄은 Express에 미들웨어를 추가하고 정적을 설정하는 것입니다. public 에 대한 리소스 경로, 모든 HTML, CSS, JS 및 기타 파일은 public

에 배치될 수 있습니다. 세 번째 단계는 public 폴더에 테스트 페이지를 추가하는 것입니다. 제가 여기서 쓰고 있는 것은changeColor.html이라는 페이지입니다. 휴대폰에 표시되면 휴대폰 화면이 가로, 세로로 바뀌고, 본체의 배경색도 달라집니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testExpress</title>
 <style type="text/css">
 body{background-color: yellow;}
 @media screen and (orientation:landscape){
  body{background-color: orange;}
 }
 </style>
</head>
<body>
</body>
</html>

로그인 후 복사

Step 4. 추가 후 서비스를 시작합니다.

여기서 sublime을 사용하고 있습니다. Ctrl+R을 두 번 누르면 콘솔이 포트 4444에서 앱 수신 대기를 출력하면 서비스가 성공적으로 시작되었음을 의미합니다. 브라우저를 열고 주소 표시줄에 http://localhost/4444/changeColor.html

를 입력하여 테스트 웹페이지를 확인하세요. localhost를 기기의 IP로 바꾸면 대체된 주소가 휴대폰에 표시될 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!