Windows 환경 위챗 애플릿의 로컬 테스트 서버 구축

Mac 환경에서

Mac 환경 위챗 프로그램 구축을 위한 로컬 테스트 서버

문제 제기

Windows 환경

프로그램을 간편하고 신속하게 구축할 수 있는 테스트 서버

네트워크 요청 URL에 대한 애플릿의 특수 요구 사항

포트 번호가 표시되지 않음

localhost 사용 불가

https

주요 절차

json-server로 간단한 서버를 구축하고 구축된 서버 주소는localhonst:3000

포트 번호를 숨기고 localhost

를 교체하기 위해nginx를 설치하여 역방향 에이전트를 진행합니다

https 서비스 구축

위챗 애플릿 설정

사용된 도구

json-server

nginx

openssl

위챗 프로그램 공식 개발 도구

우선 윈도우즈 환경에서 node를 설치해야 합니다.js

Node.js 다운로드 주소
Windows Installer를 선택하여 해당하는 시스템 버전을 다운로드하고 next를 계속하십시오.이 방식을 설치하면 환경 변수도 설정되어 명령줄에 바로 입력됩니다.

// 
node --version

json-server의 사용

설치

npm install -g json-server

파일 디렉터리를 선택하여 json 파일을 새로 만듭니다. 예를 들어cars.json

{
  "cars": [
    {
      "id": 1,
      "desc": " H6",
      "completed": false
    },
    {
      "id": 2,
      "desc": " ",
      "completed": false
    },
    {
      "id": 3,
      "desc": " 560",
      "completed": false
    }
  ]
}

json-server 서비스 시작: 새 json 파일 디렉터리, 실행 명령: json-server + 파일 이름

json-server cars.json

출력:

Loading cars.json
Done

Resources
http://localhost:3000/cars

Home
http://localhost:3000

브라우저에서 주소 입력http://localhost:3000/cars출력 카가 보입니다.json 내용

이로써 간단한 로컬 테스트 서버를 구축했고 json-server는 get,post 등을 지원하여 테스트를 개발하기에 기본적으로 충분하다. 구체적으로는 json-server 홈페이지

를 참고할 수 있다

localhost:3000/todos 같은 인터페이스를 www.test로 바꾸기 위해com/todos와 같은 형식으로nginx로 역방향 에이전트를 해야 한다

nginx로 역방향 에이전트 진행

nginx 다운로드 주소

nginx 설치가 더 간단합니다. 상기 주소를 다운로드한 후 직접 자신의 디렉터리로 압축을 풀면 됩니다

nginx의 압축 해제 디렉터리에 가서nginx를 찾습니다.exe 파일, 두 번 클릭하면 시작됩니다.물론 명령행으로도 사용할 수 있다. 뒤에 흔히 볼 수 있는 명령 소개가 있다

브라우저에서 입력http://localhost:8080,nginx의 환영 인터페이스에 접근하면,nginx 설치 성공

nginx의 역방향 프록시 설정:nginx를 편집합니다.conf 파일.이 파일은nginx에 있습니다.exe가 있는 디렉터리의 conf 폴더

nginx를 수정합니다.conf 파일의 서버 {} 내용입니다.여기서 주의해야 할 것은, conf 파일에는 주로 2개의 서버 {}가 있는데, 하나는 기본적으로 http 요청을 감청하는 8080 포트이고, 다른 하나는 https 요청을 감청하는 것이다.그중 https 서버는 기본적으로 주석이 떨어졌다

server {
   listen       80;// 8080 80 ， 
   server_name  www.test.com;// 
   location / {
        proxy_pass http://127.0.0.1:3000/;// ， json-server 
    }
    ...
}

nginx 서비스 재개

테스트 도메인 이름을hosts 파일에 넣는 것을 잊지 마세요!!!

//hosts 
127.0.0.1 www.test.com

이상의 설정을 거쳐nginx 에이전트의 설정이 완성되었습니다.json-server를 시작하면 브라우저에 한 번 접근할 수 있습니다

localhost/cars
localhost
www.test.com
www.test.com/cars

기타 문제
nginx에서 자주 사용하는 명령 (nignx.exe가 있는 디렉터리에 있어야 하며, 환경 변수에 추가할 수도 있습니다)

시작

nginx.exe
 
start nginx
 
 nginx.exe

중지

nginx.exe -s stop
 
nginx.exe -s quit

재부팅

nginx.exe -s reload

윈도우즈 수정hosts

hosts 파일 디렉토리: C:\Windows\system32\drivers\etc

hosts 파일을 수정하려면 먼저 hosts 파일을 비시스템 디스크의 디렉터리로 복사해야 한다. 예를 들어 데스크톱을 수정한 다음에 데스크톱의hosts 파일을 수정하고 마지막으로 수정된hosts 파일을 시스템hosts 파일의 디렉터리로 복사하고 경고가 나온 후에 교체 확인을 선택한다

https 서비스 설치

openssl을 이용하여 인증서 생성

openssl 도구 다운로드 주소:http://slproweb.com/products/Win32OpenSSL.html

다운로드 후 계속 next 설치, 명령줄 입력: Openssl 오류를 보고하지 않고 설치에 성공했습니다. 설치 과정에서 Openssl을 환경 변수에 추가했습니다

ssl 키 생성

서버를 설정합니다.key.과정 중 키의 비밀번호를 입력해야 합니다. 이 비밀번호는 뒤에 개인 키를 생성하는 데 사용됩니다

.

openssl genrsa -des3 -out server.key 1024

매개변수 설정이 과정에서 우리는 국가, 지역, 조직 등 정보를 입력하고 직접적으로 "를 입력하게 할 것이다.설정하지 않습니다. 하지만 하나도 설정하지 마십시오. 그렇지 않으면 서버를 생성할 수 없습니다.csr 파일

openssl req -new -key server.key -out server.csr

RSA 비밀 키를 쓰면 비밀번호가 서버입니다.key 암호

openssl rsa -in server.key -out server_nopwd.key

개인 키 가져오기

openssl x509 -req -days 365 -in server.csr -signkey server_nopwd.key -out server.crt

nginx 프로필 수정nginx.conf

server {
   listen       80;// 8080 80 ， 
   server_name  www.test.com;// 
   
   // 
   ssl on;
   ssl_certificate D:\MyWorkSpace\json-server\server.crt;// 
   ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;// 
   
   location / {
        proxy_pass http://127.0.0.1:3000/;// ， json-server 
    }
}

이상 구성 후http://www.test.com/cars브라우저에 접근하면 400bad request 문제가 발생합니다.https://www.test.com/cars또 넷::ERR_CONNECTION_REFUSED

nginx를 계속 수정합니다.conf, 주로 https 서버 {} 모듈을 수정하고 주요 수정점:

https server {} 모듈 주석 삭제

ssl 관련 설정 추가

프록시 설정 추가

# HTTPS server
#
server {
    listen       443 ssl;
    server_name  localhost;

    ssl_certificate D:\MyWorkSpace\json-server\server.crt;// 
    ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;// 

    location / {
        proxy_pass http://127.0.0.1:3000/;
                root   html;
          #      index  index.html index.htm;
    }
}

이로써 https 서비스 설정이 완료되어 브라우저에서 사용할 수 있습니다https://www.test.com/cars액세스

기타 문제

Chrome에서 항상 액세스하는 것은 안전한 링크가 아닙니다

 crt ， 

nginx 오류 발생

nginx: [emerg] bind() to 0.0.0.0:443 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)

뒤에 443 포트가 VMware에 의해 점용되었기 때문에 VMware를 직접 제거하면 됩니다.

위챗 애플릿 구성

위챗 애플릿 관리 페이지에 로그인하여 --> 개발 설정 --> 서버 도메인 이름 --> 자신의 테스트 도메인 이름을 추가합니다.주의해야 할 것은 한 달에 5회만 수정할 수 있다는 것이다

위챗 애플릿을 이용하여 프로젝트를 열고 설정 정보에서 새로 고침을 누르면 방금 수정한 도메인 이름을 볼 수 있다

되돌아오는 결과 정보를 보기 위해 네트워크 요청이 필요한 곳에 로그 인쇄를 추가

wx.request({
  url: 'https://www.test.com/cars',
  method:'GET',
  header: {
    'content-type': 'application/json'     
  },
  success: function (res) {
    console.log(res.data)
  }
})
showRequestInfo()

모든 것이 정상적이라면 디버그 인터페이스의 conole에서 json-server 서버가 되돌려주는objects 목록, 즉 우리가 작성한cars를 출력합니다.json 파일의 내용

기타 문제

네트워크에서 서버 API를 요청할 때 이 서버의 인증서가 잘못되었습니다.

 ， “ TLS 

이상은 윈도우즈에서 애플릿 서버를 구축하는 과정입니다.
오늘 너는 진보했니?나의 위챗 공중번호에 관심을 가지신 것을 환영합니다. 나와 함께 매일 조금씩 진보합시다!