Как я могу развернуть приложение Angular 2 + Typescript + Webpack

Я действительно изучаю Angular 2 с Typescript и разработал небольшое приложение на основе проекта angular -seed (angular-seed). Я создал приложение для производственных целей и получил папку dist, готовую к развертыванию, содержащую мои файлы пакета, например:

dist/                    
  main.bundle.js              
  main.map         
  polyfills.bundle.js          
  polyfills.map            
  vendor.bundle.js         
  vendor.map

Однако, как более свежо, я понятия не имею, как развернуть его сейчас на моем сервере EC2. Я прочитал, что мне нужно настроить сервер Nginx для обслуживания моего статического файла, но мне нужно его настроить для работы с моими файлами пакетов?

Извините мои ошибки, если они есть. Большое спасибо заранее!

Ответы

Ответ 1

Вы на правильном пути.....

Просто установите nginx на EC2. В моем случае у меня был Linux Ubuntu 14.04, установленный на "Digital Ocean".

Сначала я обновил списки пакетов apt-get:

sudo apt-get update

Затем установите Nginx, используя apt-get:

sudo apt-get install nginx

Затем откройте файл конфигурации блока сервера по умолчанию для редактирования:

sudo vi /etc/nginx/sites-available/default

Удалите все в этом файле конфигурации и вставьте следующий контент:

server {
    listen 80 default_server;
    root /path/dist-nginx;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ =404;
    }
}

Чтобы сделать изменения активными, перезапустите веб-сервер nginx:

sudo service nginx restart

Затем скопируйте index.html и файлы пакета в /path/dist-nginx на свой сервер, и вы запустите.

Ответ 2

Более быстрый способ развертывания выглядит следующим образом:

1. Установите nginx, как упоминал Герман.
2. Скопируйте файлы dist/* в/var/www/html/без нарушения /etc/nginx/sites -available/default.
  sudo cp/your/path/to/dist/*/var/www/html/
3. Перезагрузка nginx:
  sudo systemctl restart nginx

Ответ 3

Если кто-то все еще борется с производственной настройкой углового 2/4/5 приложения + Nginx, то вот полное решение:

Предположим, вы хотите развернуть свое угловое приложение в HOST: http://example.com и PORT: 8080 Note - HOST и PORT могут быть разными в вашем случае.

Убедитесь, что у вас есть <base href="/"> в вашем теге index.html head.

  1. Во-первых, перейдите к вашему пути углового репо (т.е./Home/user/helloWorld) на вашем компьютере.

  2. Затем выполните команду build/dist для вашего производственного сервера, используя следующую команду:

    ng build --prod --base-href http://example.com:8080

  3. Теперь скопируйте /dist (т.е./Home/user/helloWorld/dist) из вашего углового репо вашего устройства на удаленный компьютер, на котором вы хотите разместить свой производственный сервер.

  4. Теперь войдите на свой удаленный сервер и добавьте следующую конфигурацию сервера nginx.

    server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

  5. Теперь перезапустите nginx.

  6. Это !! Теперь вы можете получить доступ к своему угловому приложению по адресу http://example.com:8080

Надеюсь, это будет полезно.

Ответ 4

Я использую официальный angular CLI вместо этого для развертывания на производстве и очень легко сделать. Вы можете развернуть его до предпроизводственного производства или производства таким образом:

ng build --env = pre -output-path = build/pre/

ng build --env = prod --output-path = build/prod/