单个Nginx发布多个react静态页面
<p>在有些网络环境中，端口是一种比较稀缺的资源，而我们又恰好有多个前端项目需要发布，我们可以采取将多个项目映射到同一个端口上面的方案加以解决。</p><p>本教程前端项目主要以react为主，部署在linux服务器上。</p>
<h2 id="1-将项目资源的访问地址修改为相对方式">1. 将项目资源的访问地址修改为相对方式</h2>
<p>在react项目<code>package.json</code>中，添加或者修改<code>homepage</code>属性为<code>.</code>。具体为：</p>
<pre><code class="language-json">{
"name": "app1",
"version": "0.1.0",
"private": true,
"homepage": ".", //资源地址改为相对当前的路由，默认是根目录/
...
}
</code></pre>
<h2 id="2-添加nginx配置">2. 添加nginx配置</h2>
<p>假设我们有两个项目，<code>app1</code>和<code>app2</code>。首先将build后的项目都复制到<code>/usr/share/nginx/html</code>目录下，其次在<code>/etc/nginx/conf.d/</code>目录下添加我们的配置文件，nginx会自动加载该目录下以<code>.conf</code>结尾的配置文件，这里我们新建<code>myapp.conf</code>,并添加以下内容：</p>
<pre><code class="language-bash">server {
listen 80; # 监听80端口
server_name_;
# 将根目录映射到/usr/share/nginx/html，注意此处为root
location / {
root /usr/share/nginx/html;
index index.html; # 我们在根目录放了一个简单的主页，用于介绍我们的服务，
}
# 将app1目录映射到/usr/share/nginx/html/app1，注意此处为alias
location /app1 {
alias /usr/share/nginx/html/app1;
index index.html;
try_files $uri $uri/ =404;
}
location /app2 {
alias /usr/share/nginx/html/app2;
index index.html;
try_files $uri $uri/ =404;
}
}
</code></pre>
<h2 id="3重新加载nginx配置">3.重新加载nginx配置</h2>
<p>将工作目录切换至nginx的安装目录，并执行以下命令，实现热重载配置文件：</p>
<pre><code class="language-bash">./nginx -s reload
</code></pre>
<p>至此，我们就完成了将多个项目使用一个nginx代理发布的流程了。</p>
<p>可以通过地址<code>http://localhost:80/</code>访问主页，通过<code>http://localhost:80/app1/</code>访问ap1。注意该配置的访问地址必须以<code>/</code>结尾,不然无法正常访问。</p>
<p>...........................................</p>
<p>以下步骤为docker版的操作流程，为拓展教程，不使用docker的可以不看。</p>
<h2 id="4使用nginx的docker镜像进行发布">4.使用nginx的docker镜像进行发布</h2>
<p>添加Dockerfile并添加以下内容：</p>
<pre><code class="language-Dockerfile">FROM nginx
ENV TZ 'Asia/Shanghai'
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8
ADD myapp.conf /etc/nginx/conf.d/ #添加nginx配置文件
ADD index.html /usr/share/nginx/html #添加简单的介绍主页
ADD ./app1/build /usr/share/nginx/html/app1 #添加项目app1
ADD ./app2/build /usr/share/nginx/html/app2 #添加项目app2
</code></pre>
<p>并使用以下命令执行自动镜像构建：</p>
<pre><code class="language-bash"># npm run build
docker build . -t react-nginx
docker stop react-nginx
docker rm react-nginx
# docker rmi react-nginx
docker run --name react-nginx -p 8036:80 -d react-nginx
docker logs -f react-nginx
</code></pre><br><br>
来源：https://www.cnblogs.com/hsxian/p/17815325.html
頁:
[1]