Блог

Я разработал веб-сайт, используя Vue.js (для интерфейса) и создал сервер для подключения этого веб-сайта к API (здесь это Twitter). Сервер выполнен с Express.js. В localhost все работает. У меня есть сервер на локальном хосте:8085, который работает, мой веб-сайт на локальном хосте:8080. Я могу получить доступ к данным благодаря Api, например, через GET http://localhost:8085/TheNameOfTheApiFunction.

Поскольку я хочу легко развернуть свой веб-сайт, я попробовал использовать Heroku и Firebase. Я делаю «сборку запуска npm» с интерфейсом, помещаю результат в «общедоступный» каталог моего сервера, firebase.json в порядке (я думаю).

   "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function":"app",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix "$RESOURCE_DIR" run lint"
    ]
  }
}
 

На данный момент, когда я запускаю веб-сайт, интерфейс работает, но не имеет доступа ни к одной функции API. Кажется логичным, потому что нет localhost/8085, к которому можно было бы обращаться с запросами функций.
GET http://localhost:8085/NameOfTheApiFunction net::ERR_CONNECTION_REFUSED

Из-за этого я решил изучить причины и обнаружил, что мне следует использовать то, что предлагается в этом руководстве : https://firebase.google.com/docs/hosting/functions#use_a_web_framework. Поэтому я скопировал и вставил то, что было в моем app.js файл в index.js файл создается функциями firebase (в каталоге функций). Но это не работает.

Что я должен сделать, чтобы обеспечить хорошее развертывание ? Должен ли я изменить то, что находится в клиенте в API.js чтобы это было адаптивно ?

 
export default () => {
    return axios.create({
        baseURL: `http://localhost:8085/`
    })
}
 

Редактировать
Чтобы было понятно.

1. В папке «мое приложение» у меня есть папка «клиент», там мой Vue.js интерфейсный веб-сайт в нем, и я запускаю его локально npm run serve .
2. В той же папке «myapp» у меня есть папка «сервер», которая была необходима для подключения к Api Twitter, потому что это невозможно из интерфейса. Я запускаю его, выполнив «запуск npm».
3. Мой интерфейс подключается к «серверу» с помощью Axios. Сервер anwser с get или post и способен запрашивать информацию в API twitter.
4. На локальном хостинге все работает просто отлично. Я хочу развернуть веб-сайт, и я следил за этим видео : https://www.youtube.com/watch?v=GJwHevf2wYE Парень предлагает создать папку с именем «public» в серверной части, в которую вы помещаете все файлы, которые поступают из сборки (npm run build) «клиента». Вы добавляете app.use(express.static("public")) сервер, и когда я запускаю, например, localhost:8085 (т. е. сервер) Я могу получить доступ ко всему сайту одной командой (а не двумя).
5. Поскольку это работало, я подумал, что смогу запустить веб-сайт, развернув папку «сервер». Но это не работает, и я думаю, что это потому, что «клиентская» сторона закодирована так, чтобы запрашивать «localhost:8085/ApiFunctions». Но я не понимаю, как я должен развернуть сервер. Вот почему я попытался использовать хостинг firebase, но у меня точно такая же проблема : я не совсем понимаю, как это работает, чтобы узнать, связана ли проблема с моим методом развертывания или кодом(у axios есть baseUrl: localhost:8085).

Я понимаю, что:

1. Ваш Vue.js приложение обслуживается через службу хостинга Firebase.
2. Вы передаете свое приложение Express в облачную функцию HTTP, как описано в документе, на который вы ссылаетесь, а также здесь, в документе Облачные функции.

Если это правильное понимание, вы можете получить доступ к своему приложению Express JS (т. Е. к облачной функции) по следующим URL-адресам, как описано в нижней части документа (пункт 2).:

• Ваши поддомены Firebase: <Firebase_project_ID>.web.app/<NameOfTheApiFunction> и <Firebase_project_ID>.firebaseapp.com/<NameOfTheApiFunction>
• Или любые подключенные пользовательские домены: <custom_domain>/<NameOfTheApiFunction> .

ОБНОВЛЕНИЕ ПОСЛЕ ВАШЕГО КОММЕНТАРИЯ:

Похоже, вы хотите получить доступ к CF во время использования эмулятора. Вы должны либо использовать порт эмулятора по умолчанию для облачных функций, т. е. 5001, либо настроить его с помощью другого порта, по желанию. Смотрите документ Эмуляторы.