Angular 部署

在 Linux 上的部署

在 Nginx 上部署

在 Linux 上创建 Nginx 的 Web 根目录

mkdir -p /www/nginx

编译 Angular

ng build

编译完成后会生成一个 dist 文件夹

cd dist
ls

dist 文件夹里有一个 helloworld 文件夹

这个 helloworld 就是这个 Angular 项目的名称

上传编译后的文件夹到 Linux

scp -r .\helloworld\ [email protected]:/www/nginx/helloworld

在 Linux 查看一下

ls /www/nginx/helloworld/

文件已就位

配置 Nginx

• Ubuntu Nginx 配置文件 /etc/nginx/nginx.conf

• CentOS Nginx 配置文件 /usr/local/nginx/conf/nginx.conf (具体需要知道 Nginx 的安装目录)

在 nginx.conf 同级目录下创建目录 sites-enabled (如果存在则不需要创建)

mkdir sites-enabled

在 nginx.conf 中 http 里添加 include ./sites-enabled/*; (如果存在则不需要添加)

此后站点在 sites-enabled 中配置

cd sites-enabled
vim helloworld

server {
    listen         80;
    server_name    hv.localhost.ubuntu;

    location / {
        root         /www/nginx/helloworld/;
        index        index.html index.htm;
        try_files    $uri $uri/ /index.html;
    }
}

#listen               监听的端口
#server_name          域名
#root                 站点根目录
#index                默认访问的文件
#try_files            用于替代 rewrite， Angular 中子路由的使用需要该项

重启 Nginx

nginx -s reload

访问一下看看效果

这里提前配置好了 hosts

在 Apache 上部署

在 Linux 上创建 Apache 的 Web 根目录

mkdir -p /www/apache

编译 Angular

ng build

上传编译后的文件夹到 Linux

cd dist
scp -r .\helloworld\ [email protected]:/www/apache/helloworld

配置 Apache

添加 mod_rewrite

Ubuntu

a2enmod rewrite

CentOS 修改 httpd.conf 将 LoadModule rewrite_module modules/mod_rewrite.so 前的 # 去掉 (vim 通过 :/mod_rewrite 可快速找到)

vim /usr/local/httpd-2.4.46/conf/httpd.conf

• Ubuntu Apache 配置文件 /etc/apache2/apache2.conf

• CentOS Apache 配置文件 /usr/local/httpd-2.4.46/conf/httpd.conf (具体需要知道 httpd 的安装目录)

在 apache2.conf 或 httpd.conf 同级目录下创建目录 sites-enabled (如果存在则不需要创建)

mkdir sites-enabled

在 apache2.conf 中添加 IncludeOptional sites-enabled/*.conf (如果存在则不需要添加)

※ CentOS 需要在 httpd.conf 中添加 Include conf/sites-enabled/*.conf

此后站点在 sites-enabled 中配置

cd sites-enabled
vim helloworld.conf

<VirtualHost *:80>
    DocumentRoot "/www/apache/helloworld" 
    ServerName hv.localhost.ubuntu
    ServerAlias hv.localhost.ubuntu

    
          RewriteEngine On
          RewriteBase /
          RewriteRule ^index\.html - [L]
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteCond %{REQUEST_FILENAME} !-d
          RewriteRule . index.html [L]
          Require all granted
    Directory>
VirtualHost>

重启 Apache

/etc/init.d/apache2 restart

访问一下