devNote

miragejs 설치

• nuxtjs 프로젝트로 이동

•  소스 파일 받기

miragejs  폴더에 소스가 받아진다.

$ npx degit vedovelli/miragejs-starter-kit miragejs

• 의존성 라이브러리 추가

npm 사용 시

npm install --save-dev miragejs faker

yarn 사용 시 (  nuxt  프로젝트 생성 시 사용하는 패키지 관리 사용하면 된다. )

yarn add -D miragejs faker

github.com/vedovelli/miragejs-starter-kit

일단 이걸로 설치 끝.

이젠 사용할 수 있게 환경을 세팅한다.

nuxt 프로젝트 내에 plugins 폴더 안에 mirage.js 파일을 생성 다음과 같이 저장한다.

if (process.env.NODE_ENV === 'development') {
  require('../miragejs/server').makeServer();
}

nuxt.config.js 파일에 다음과 같이 추가

...
plugins: ['@/plugins/mirage.js'],
...

이렇게 까지가 사용할 수 있게 설정

yarn dev 실행 시 사용할 수 있다.

랜더링 설정

서버 측 렌더링을 한다는 건  사용자가 요청이 있을 시 서버에서 요청 페이지를 렌더링 되므로, 당연히 서버가 필요하다.

적정 사이트는 서버측 렌더링과 매우 비슷하지만, 차이점은 정적 사이트가 빌드 시에 랜더링 된다는 것이다. 그래서 서버가 필요 없고, 정적 사이트 내에서 페이지 이동은 클라이언트 측에서 이동된다.

export default { 
	ssr: true // 기본값
}

ssr을 false로 하면 서버 측 렌더링을 안 함으로 설정

AWS S3와 같은 곳에선 ssr: false로 설정

타겟 설정

nuxt generate명령은 웹 사이트의 정적 html을 생성하고 dist/ 디렉터리에 파일을 이동한다.

성능이 좀 더 좋아지고, SEO 및 기타 다른 지원을 좋게 한다.

export default {
  target: 'static' // 기본값 'server'
}

• context에서 req, res 제거된다.
• 404, 오류, 리다이렉션 처리는 클라이언트 측에서 처리
• $route.query 사용.
• process.static 속성은 true

AWS S3로 사용 시 static 

API 로컬 테스트를 할 수 있게 

로컬에서 구동시켜봤다.

>sam local start-api

설치 후 오랜만에 구동해보는 건지 구동이 안됐다.

Traceback (most recent call last):
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\runpy.py", 
line 193, in _run_module_as_main
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\runpy.py", 
line 85, in _run_code
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\__main__.py", line 12, in <module>
    cli(prog_name="sam")
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 829, in __call__
    return self.main(*args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 782, in main
    rv = self.invoke(ctx)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 1259, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 1259, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 1066, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 610, in invoke
    return callback(*args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\decorators.py", line 73, in new_func
    return ctx.invoke(f, obj, *args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\click\core.py", line 610, in invoke
    return callback(*args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\lib\telemetry\metrics.py", line 96, in wrapped
    raise exception  # pylint: disable=raising-bad-type
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\lib\telemetry\metrics.py", line 62, in wrapped
    return_value = func(*args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\commands\local\start_api\cli.py", line 86, in cli
    parameter_overrides,
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\commands\local\start_api\cli.py", line 142, in do_cli
    aws_profile=ctx.profile,
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\commands\local\cli_common\invoke_context.py", line 136, in __enter__
    if not self._container_manager.is_docker_reachable:
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\samcli\local\docker\manager.py", line 47, in is_docker_reachable
    self.docker_client.ping()
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\client.py", line 187, in ping
    return self.api.ping(*args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\api\daemon.py", line 166, in ping
    return self._result(self._get(self._url('/_ping'))) == 'OK'
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\utils\decorators.py", line 46, in inner
    return f(self, *args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\api\client.py", line 230, in _get
    return self.get(url, **self._set_request_timeout(kwargs))
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\requests\sessions.py", line 543, in get
    return self.request('GET', url, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\requests\sessions.py", line 530, in request
    resp = self.send(prep, **send_kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\requests\sessions.py", line 643, in send
    r = adapter.send(request, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\requests\adapters.py", line 449, in send
    timeout=timeout
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\urllib3\connectionpool.py", line 677, in urlopen
    chunked=chunked,
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\urllib3\connectionpool.py", line 392, in _make_request
    conn.request(method, url, **httplib_request_kw)
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\client.py", line 1252, in request
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\client.py", line 1298, in _send_request
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\client.py", line 1247, in endheaders
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\client.py", line 1026, in _send_output
  File "D:\obj\windows-release\37amd64_Release\msi_python\zip_amd64\client.py", line 966, in send
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\transport\npipeconn.py", line 32, in connect
    sock.connect(self.npipe_path)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\transport\npipesocket.py", line 23, in wrapped
    return f(self, *args, **kwargs)
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\transport\npipesocket.py", line 72, in connect
    raise e
  File "C:\Program Files\Amazon\AWSSAMCLI\runtime\lib\site-packages\docker\transport\npipesocket.py", line 59, in connect
    0
pywintypes.error: (2, 'CreateFile', '지정된 파일을 찾을 수 없습니다.')

위와 같이 에러가 표시되며 실행이 안됐다.

왜 실행이 안되지 하며

다시 설치 과정을 다시 짚어보다가 도커 실치 과정을 봤다.

도커를 실행하고 나니 제대로
서비스가 올라갔다.

Mounting HelloWorldFunction at http://127.0.0.1:3000/hello [GET]
You can now browse to the above endpoints to invoke your functions. You do not 
need to restart/reload SAM CLI while working on your functions, changes will be reflected instantly/automatically. You only need to restart SAM CLI if you update your AWS SAM template
2020-09-09 23:25:23  * Running on http://127.0.0.1:3000/ (Press CTRL+C to quit)

도커가 실행되지 않고 있어서 로컬 실행이 안되었던 것이다. 

서비스가 올라간 후 해당 서비스로 브라우저로 접속해보면
http://127.0.0.1:3000/hello
아래와 같이 도커 이미지를 마운트 하는 작업을 그때서야 시작하고 
도커에서 공유 폴더 수락하겠냐고 경고가 나오면 수락해줬다.

2020-09-09 23:30:52 127.0.0.1 - - [09/Sep/2020 23:30:52] "GET / HTTP/1
.1" 403 -
2020-09-09 23:30:52 127.0.0.1 - - [09/Sep/2020 23:30:52] "GET /favicon
.ico HTTP/1.1" 403 -
Invoking app.lambdaHandler (nodejs12.x)

Fetching lambci/lambda:nodejs12.x Docker container image.....................................................................................................................................................................................................................................................................................
Mounting C:\Users\ej\daonstar\nuxt\sam-app\.aws-sam\build\HelloWorldFunction as /var/task:ro,delegated inside runtime container
START RequestId: 01f99077-c224-1bdf-84fa-21ea94f2387b Version: $LATEST

END RequestId: 01f99077-c224-1bdf-84fa-21ea94f2387b
REPORT RequestId: 01f99077-c224-1bdf-84fa-21ea94f2387b     Init Duration: 
1312.10 ms      Duration: 6.05 ms       Billed Duration: 100 ms Memory Size: 128 MB    Max Memory Used: 40 MB  
No Content-Type given. Defaulting to 'application/json'.
2020-09-09 23:31:36 127.0.0.1 - - [09/Sep/2020 23:31:36] "GET /hello HTTP/
1.1" 200 -
2020-09-09 23:31:36 127.0.0.1 - - [09/Sep/2020 23:31:36] "GET /favicon
.ico HTTP/1.1" 403 -

로컬에 도커 대시보드의 화면이다.

관련 도커 이미지가 올라와 있다.

기본 예제를 시행해서인지 생각보단 쉽다.

결과는 브라우저에 아래와 같이 잘 나왔다.

{"message":"hello world"}