Docker/Nuxt/Django構成でプロダクトを作った際の知見（Vuetifyと@nuxtjs/authを利用）

2. ▸
▸
▸
▸
▸

3. ▸
▸
▸
▸

5. ▸
Nginx(Proxy)
Django
(port:8000)
Nuxt
(port:3000)
DB
port:80
/admin(Django )
/api
/static(Django )
port:8000 proxy
port:3000 proxy
upstream django {
ip_hash;
server django:8000;
}
upstream nuxt {
ip_hash;
server nuxt:3000;
}
server {
location ~ /(api|admin|static)/ {
proxy_pass http://django;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Host $host;
}
location / {
proxy_pass http://nuxt;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Host $host;
}
listen 80;
server_name localhost;
}

6. ▸
▸
▸
▸
▸
▸

7. ▸
▸
▸
▸
auth: {
fetchUserOnLogin: true,
strategies: {
local: {
endpoints: {
login: {
url: '/api/auth/token/create/', method: 'post',
propertyName: 'auth_token'
},
logout: { url: '/api/auth/token/destroy/', method: 'post' },
user: { url: '/api/auth/me/', propertyName: false },
},
tokenType: 'Token',
tokenName: 'Authorization'
}
},
redirect: {
login: '/login',
home: '/'
}
},

8.
{
“email”:”***",
"id":2,
“username":"user2",
"scope":[
"general"
]
}
{“auth_token”:”*****”}

9. ▸
{
“email”:”***",
"id":1,
“username":"user1",
"scope":[
“admin"
]
}
<div>
<p>Admin Page</p>
<p v-if="this.$auth.hasScope('admin')">
Secret Area
</p>
</div>

10. ▸
▸
async submit () {
try {
await this.$auth.login({ data: this.form })
if (this.$auth.hasScope('general')) {
this.$nuxt.$router.push('/general')
} else if (this.$auth.hasScope('admin')) {
this.$nuxt.$router.push('/admin')
}
} catch (e) {
this.error = 'Login failed.'
}
}

11. ▸
▸
▸
▸
▸
▸
▸
▸

12. ▸
▸
▸
▸