Итак, мне нужно, чтобы API висело на том же домене, что и одностраничник на Vue.js, а это значит, что мне предстоит либо разместить API на другом сервере и добавить балансировщик, либо использовать другой порт и добавить правило для nginx.
Этот пост — продолжение серии о том, как мы делали photographerexcuses.com.
Я выбрал Nginx для кое-каких поделий на PHP, а также потому, что он лёгкий и имеет самые удобные конфиги, которые я видел.
Чтобы увидеть полный конфиг, пролистайте до конца страницы.
Вот самая важная часть конфига, отвечающая за перенаправление на Go API:
location /api/excuse {
rewrite ^/api/item(/.*)$ $1 break;
proxy_pass http://127.0.0.1:4000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_redirect off;
}
После этого nginx будет оставлять каждый запрос на http://127.0.0.1:4000 нетронутым. И к этому адресу можно обращаться как к http://photographerexcuses.com/api/item. Другие запросы будут перенаправляться на 404 страницу, потому что у одностраничного приложения обычно есть только файл index.html.
А $1 в той же строке означает, что все запросы, типа /api/item/141, будут переданы так: http://127.0.0.1:4000/141. Это нам нужно для передачи в запрос определённого ID.
server {
listen 80; ## listen for ipv4
listen :80[::]:80 default ipv6only=on; ## listen for ipv6
server_name photographerexcuses.com;
access_log /var/log/nginx/photographerexcuses.access.log;
error_log /var/log/nginx/photographerexcuses.error.log;
root /var/www/photographerexcuses.com/;
location / {
root /var/www/photographerexcuses.com;
try_files $uri $uri/ /index.html;
index index.php index.html;
}
# rewrite `http://www` to `http://`
if ($host ~* ^www\.(.*))
{
set $host_without_www $1;
rewrite ^/(.*)$ $scheme://$host_without_www/$1 permanent;
}
location /api/excuse {
rewrite ^/api/excuse(/.*)$ $1 break;
proxy_pass http://127.0.0.1:4000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_redirect off;
}
add_header X-Clacks-Overhead "GNU Terry Pratchett";
}
Источник: «Proxy / Rewrite your API Endpoint into Domain Segment with Nginx»
Продолжение: http://tehnojam.ru/category/development/sozdaem-odnostranichnik-s-vue_js.html
Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.
Пишите: @ighar. Buy me a coffee, please :).