【GCP+nginx+phoenix】가챠 시뮬레이터(웹 앱)를 만든 ②

4533 단어 nginxVue.jsElixirPhoenixgcp

소개



지난번, 가챠 시뮬레이터를 만들었습니다.
백엔드가없는 기본 HTML을 표시하기위한 페이지 이었기 때문에 GCP에 백엔드 환경을 만들었습니다.

제작물



여기는 전회와 같다.

완제품


phoenix 프레임 워크에서 이전 앱을 실행할 수있었습니다.



운영 환경



환경은 다음과 같습니다.



전면
백엔드
서버
인프라


지난번
Vue.js
-
nginx
GCP

이번에
Vue.js
phoenix 1.4
nginx
GCP


우선, 사이트에 접속하면 phoenix의 페이지가 표시되어, 전회의 웹 앱을 표시시키는 곳까지 목표로 했다. 따라서 백엔드로서의 기능은 아직 구현되지 않았다.

작동 절차



Erlang 및 Elixir 설치


~$ wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb && sudo dpkg -i erlang-solutions_1.0_all.deb
~$ sudo apt update
~$ sudo apt install esl-erlang elixir -y

node.js 설치


//そのままだとnpmが入らないのでパッケージリストを更新
~/$ curl -sL https://deb.nodesource.com/setup_6.x | sudo bash -
~/$ sudo apt install nodejs -y
~/$ sudo apt install build-essential npm -y

postgresql 설치



postgresql은 phoenix에서 사용할 때 암호를 postgres로 설정해야합니다.
~/$ sudo apt install postgresql postgresql-contrib -y

//root権限でpostgresqlにログイン
~/$ sudo -u postgres psql postgres
postgres=# \password
Enter new password: 
Enter it again: 
postgres=# \q

//postgresで入れるか確認
~/$ psql -h localhost -U postgres

phoenix 설치


~/$ sudo apt-get install inotify-tools -y
~/$ mix archive.install hex phx_new 1.4.0
~/$ mkdir phoenix
~/$ cd phoenix
~/phoenix/$ mix phx.new app


We are almost there! The following steps are missing:

    $ cd app

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

nginx 라우팅 변경



현재 nginx 설정이면 이전 페이지가 표시되므로 페이지에 액세스 할 때
phoenix 서버에 액세스하기 위해 라우팅 변경

/etc/nginx/sites-enabled/default
server {

~~前略~~

#前回追記した行をコメントアウトする
#root /home/[your_name]/app;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://127.0.0.1:4000;
                #try_files $uri $uri/ =404;
        }

~~後略~~

}

phoenix 페이지 편집



먼저 다음 파일에 vue.js와 uikit.min.css를 읽을 수 있도록 다음 두 줄을 추가합니다.

~/phoenix/app/lib/app_web/templates/layout/app.html.eex
<head>
<!-- 以下を追記する -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css"/>
</head>

<body>
<!-- 以下を追記する -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

그렇다면 초기 페이지 ~/phoenix/app/lib/app_web/templates/page/index.html.eex에 지난번의 소스 코드를 추가합니다.

이상으로 완성! !

마지막으로 SSH를 끊어도 백그라운드 실행을 위해 다음 명령을 친다.
~/phoenix/app/$ nohup mix phx.server &

도메인 획득



마지막으로 지금까지는 IP 직타로의 액세스였지만, 그것이라고 괄호 나쁘기 때문에 Google Domain로 독자 도메인을 취득해,
여기을 참고로 설정했다.

결론



우선 GCP 위에 Elixir + phoenix의 환경을 구축 할 수 있었다.
이번에도 백엔드의 혜택을 얻을 수는 없지만, 다음 번 이후로 설정해 나가고 싶다.
Elixir vs. Ruby and Phoenix vs. Rails: What to Choose and Why
Elixir and Ruby Language Uses

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage