nginx部署angular
<p>官方部署教程</p><p>本文将angular官网的示例项目 <code>heroes</code>(英雄指南) 部署到nginx.</p>
<h2 id="使用angular-cli编译项目">使用angular cli编译项目</h2>
<p><code>ng build</code></p>
<p><img src="https://user-images.githubusercontent.com/38829279/66699967-3b3a7780-ed1e-11e9-8841-e7abe422eaad.png" alt="image" loading="lazy"></p>
<p>执行完成后会生成一个 <code>dist</code> 目录.</p>
<h2 id="服务器配置">服务器配置</h2>
<p>首先, 把刚才dist目录下的文件复制到服务器上的某个位置, 一会再nginx的配置文件中要用到;<br>
我把它放到了: /root/Web/Site/angular-heroes/angular-heroes-front<br>
<img src="https://user-images.githubusercontent.com/38829279/66700053-0975e080-ed1f-11e9-970a-e21e5725ccd7.png" alt="image" loading="lazy"></p>
<p>假设已经安装好nginx了;</p>
<p>在 <code>/etc/nginx/conf.d/</code> 目录下新建<code>angular-heroes.conf</code> 文件;</p>
<p>在该文件中配置虚拟服务器:</p>
<pre><code class="language-nginx">server {
listen 5001;
access_log /var/log/nginx/angular-heroes.logmain;
#默认请求
location / {
root /root/Web/Site/angular-heroes/angular-heroes-front; #定义服务器的默认网站根目录位置
index index.html index.htm; #定义首页索引文件的名称
fastcgi_paramSCRIPT_FILENAME$document_root/$fastcgi_script_name;
include /etc/nginx/fastcgi_params;
}
# 配置404页面为angular编译生成的index.html
error_page404/index.html;
location = /index.html {
root /root/Web/Site/angular-heroes/angular-heroes-front;
}
}
</code></pre>
<p>主要修改<code>root</code>属性, 改为你存放网站的目录, 就是刚才生成的dist文件夹下的内容复制到服务器的位置;<br>
errorpage属性也是必要的, 如果没有的话, 你每次用浏览器刷新网站都会出现<strong>404</strong>页面;</p>
<p><img src="https://user-images.githubusercontent.com/38829279/66700114-ba7c7b00-ed1f-11e9-82c7-0bab3cb4278b.png" alt="image" loading="lazy"></p>
</div>
<div id="MySignature" role="contentinfo">
<p>作者：Laggage</p>
<p>出处：https://www.cnblogs.com/laggage/p/11663357.html</p>
<p>说明：转载请注明来源</p><br><br>
来源：https://www.cnblogs.com/laggage/p/11663357.html
頁:
[1]