Angular入门到精通系列教程（14）- Angular 编译打包 & Docker发布
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>1. 概要</li><li>2. 编译打包<ul><li>2.1. 基本打包命令</li><li>2.2. 打包部署到二级目录</li></ul></li><li>3. Angular站点的发布<ul><li>3.1. web服务器发布</li><li>3.2. 使用docker发布</li></ul></li><li>4. 总结</li></ul></div><p></p><blockquote>
<p>环境:</p>
<ul>
<li>Angular CLI: 11.0.6</li>
<li>Angular: 11.0.7</li>
<li>Node: 12.18.3</li>
<li>npm : 6.14.6</li>
<li>IDE: Visual Studio Code</li>
</ul>
</blockquote>
<h1 id="1-概要">1. 概要</h1>
<p>当我们完成angular的开发后，如何部署到服务器呢？</p>
<h1 id="2-编译打包">2. 编译打包</h1>
<h2 id="21-基本打包命令">2.1. 基本打包命令</h2>
<p>基于Angular CLI生成的Angular项目，默认会有2个环境配置文件</p>
<pre><code>└──myProject/src/environments/
└──environment.ts
└──environment.prod.ts
</code></pre>
<ol>
<li>environment.ts: 针对开发环境使用的环境文件</li>
<li>environment.prod.ts: 生产环境编译时，将替换原有的environment.ts，然后再打包。 （根目录下的angular.json定义了这个默认行为，有需要，可以进行修改）</li>
</ol>
<p>AngularCLI刚刚生成2个文件后，如果打开比较2个文件的区别，可以看到开发环境使用的environment.ts文件中，有这么一句<code>production: false</code>。因为，针对生产环境，angular在编译时需要核心考虑效率等问题，而开发环境，要考虑方便开发者进行调试，侧重点不同。</p>
<p>那么针对生产环境如何编译呢？Angular CLI同样提供了命令,</p>
<pre><code>ng build --prod
</code></pre>
<p>其中，参数<code>--prod</code> 即告诉编译环境，编译为生产环境包。同样，angular.json中定义了默认的编译参数，如果需要，可以进行修改。主要配置参数如下</p>
<pre><code class="language-ts">"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "10mb"
}
]
}
}
</code></pre>
<p>Angular默认打包到根目录下的<code>dist</code>目录下，生成的文件为纯静态文件（html, css, js)，以及图片文件。</p>
<h2 id="22-打包部署到二级目录">2.2. 打包部署到二级目录</h2>
<p>有不少情况，我们的angular web站点不能直接部署到网站的根目录下，需要部署到二级目录下。 比如，不能部署到 http://abc.com下，要求部署到 http://abc.com/demo 这个二级目录下。针对这种情况，就需要修改一下我们的编译参数，修改为：</p>
<pre><code>ng build --prod --deploy-url /demo/ --base-href /demo/
</code></pre>
<p>增加 <code>--deploy-url</code> 和 <code>--base-href</code>。</p>
<blockquote>
<p>使用场景：比如我们有多个站点，希望使用同一个反向代理， <code>http://site1</code>, <code>http://site2</code>, 分别映射到 <code>http://abc.com/site1</code>, <code>http://abc.com/site2/</code>。 那么为了方便配置，需要把site1， site2都部署到二级目录，如<code>http://site1/site1</code>, <code>http://site2/site2</code>。 然后 <code>http://site1/site1</code>代理到<code>http://abc.com/site1</code>, <code>http://site2/site2</code>代理到<code>http://abc.com/site2/</code>， 免得css、js因为目录级别问题找不到。</p>
</blockquote>
<h1 id="3-angular站点的发布">3. Angular站点的发布</h1>
<p>Angular站点编译打包后，可以方便的发布到已有web服务器，或者打成docker image， 然后发布。</p>
<h2 id="31-web服务器发布">3.1. web服务器发布</h2>
<p>因为我们打包后，生成的文件为纯静态文件（html, css, js, 图片等)， 所以打包后的问题，可以直接copy到iis， nginx , apache tomcat等web服务器，或者node.js， java等可以显示静态文件的程序的目录下即可。</p>
<h2 id="32-使用docker发布">3.2. 使用docker发布</h2>
<p>如果部署到docker，我们可以基于一个基础的nginx docker， 然后把编译好的angular项目，copy到docker 内的nginx目录下即可。</p>
<p>基本步骤：</p>
<ol>
<li>准备Dockerfile 文件， docker可以基于<code>nginx:alpine</code>， 将编译好的angular 站点文件复制到 docker 的nginx默认目录 <code>/usr/share/nginx/html</code></li>
</ol>
<pre><code class="language-准备Dockerfile">FROM nginx:alpine
COPY . /usr/share/nginx/html
</code></pre>
<blockquote>
<p>说明： 1) 假设angular打包后的文件，与Dockerfile文件在同一个目录<br>
2) COPY . /usr/share/nginx/html, 两个参数 <code>.</code> 代表当前路径， <code>/usr/share/nginx/html</code>是docker中的目标目录</p>
</blockquote>
<ol start="2">
<li>编译docker。 在Dockerfile目录下，执行</li>
</ol>
<pre><code class="language-sh">docker build -t your-docker-name .
docker save your-docker-name > your-docker-name.tar
gzip your-docker-name.tar
</code></pre>
<p>三条命令分别为：</p>
<ul>
<li>生成docker image， 名字（name）为your-docker-name</li>
<li>导出docker image为本地文件， 文件名为 your-docker-name.tar</li>
<li>压缩docker image</li>
</ul>
<p>可以看到，因为angular编译后为纯静态文件，所以使用docker发布非常简单。部署时，只需要复制docker文件到目标机器，解压缩，然后执行<code>docker load < your-docker-name.tar</code> 即可加载docker image到目标机器。</p>
<h1 id="4-总结">4. 总结</h1>
<ol>
<li>为生产环境编译，一定要加参数<code>--prod</code></li>
<li>如果要部署到二级目录，编译时加参数。如部署到/demo二级目录下，加参数： <code>--deploy-url /demo/ --base-href /demo/</code></li>
<li>使用docker发布,可以选择基本的nginx docker， 然后将编译好的angular文件copy到nginx目录下即可。</li>
</ol>
<p><br><br></p>
<blockquote>
<p>---------------- END ----------------</p>
</blockquote>
<p><br><br><br><br><br></p>
<blockquote>
<p>======================</p>
</blockquote>
</div>
<div id="MySignature" role="contentinfo">
<hr>
文章首发<br><br>
来源：https://www.cnblogs.com/skywind/p/14343721.html
頁:
[1]