保钓者 發表於 2021-9-9 15:33:00

前端搭建Linux云服务器，Nginx配置详解及部署自己项目到服务器上

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>搭建Linux云服务器<ul><li>购买与基本配置</li><li>链接linux服务器</li><li>目录结构</li><li>基本命令</li><li>软件安装</li></ul></li><li>Linux 系统启动<ul><li>启动过程</li><li>运行级别</li></ul></li><li>Nginx详解<ul><li>1、安装<ul><li>方式一：yum安装</li><li>方式二：自定义目录安装</li></ul></li><li>2、启动nginx</li><li>3、解决80端口被占用</li><li>4、彻底卸载和删除CentOS上的Nginx</li><li>目录介绍</li><li>配置 nginx.conf<ul><li>配置文件语法</li><li>配置虚拟主机</li><li>开启gzip</li></ul></li></ul></li><li>动手发布一个自己的项目到服务器上<ul><li>一、购买一个阿里云服务器</li><li>二、putty 登陆服务器</li><li>三、服务器上安装nginx</li><li>四、上传项目</li><li>五、配置niginx的nginx.conf</li></ul></li></ul></div><p></p>
<h2 id="搭建linux云服务器">搭建Linux云服务器</h2>
<h3 id="购买与基本配置">购买与基本配置</h3>
<ul>
<li>云服务</li>
<li>注册成为阿里云用户(有支付宝账号就可以不用注册),购买ECS云服务器<br>
购买地址</li>
<li>购买选择
<ol>
<li>地域及可用区：按自己想法选择</li>
<li>实例规格：按自己家庭地位选择</li>
<li>镜像：默认选择CentOs即可</li>
<li>网络类型：默认</li>
<li>公网带宽：按自己经济条件选择</li>
<li>购买数量和时长：按需求选择<br>
我比较穷用新账号买了个88块钱一年的新手版本地址</li>
</ol>
</li>
<li>查看自己购买的产品<br>
查看自己购买的产品</li>
<li>查看实力（左侧菜单栏-实力与镜像-实例）</li>
<li>几个重要的地方
<ol>
<li>ip地址：公网ip:是用于客户端连接服务器所用的地址（主机）</li>
<li>重置密码：操作--&gt;更多--&gt;密码/秘钥--&gt;重置实例密码</li>
<li>记住：ip地址和自己的重置密码（记不住就回来重置一下）</li>
</ol>
</li>
</ul>
<h3 id="链接linux服务器">链接linux服务器</h3>
<ul>
<li>工具<br>
免费：putty finalshell git-bash cmdermac命令端 linux桌面<br>
收费：xshell SecureShell<br>
这里我用的putty工具进行链接</li>
<li>链接与登陆
<ol>
<li>打开putty输入：host Name（公网ip）、port（默认22就行）确认即可<br>
点击连接，第1次会看到提示，选择 是 就可以</li>
<li>进去会让你输入login as：一般输入root即可</li>
<li>password：你设置的密码（linux中对于密码是隐式显示，输入后在终端中看不到字符）</li>
</ol>
</li>
</ul>
<h3 id="目录结构">目录结构</h3>
<p>Linux系统(以CentOs7为例)主要目录结构,Linux目录是一个树状结构。</p>
<table>
<thead>
<tr>
<th style="text-align: center">名称</th>
<th style="text-align: left">解释</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">/</td>
<td style="text-align: left">根目录</td>
</tr>
<tr>
<td style="text-align: center">bin</td>
<td style="text-align: left">常用的命令</td>
</tr>
<tr>
<td style="text-align: center">sbin</td>
<td style="text-align: left">系统管理员可以运行的程序</td>
</tr>
<tr>
<td style="text-align: center">boot</td>
<td style="text-align: left">linux内核及引导系统程序所需要的文件目录</td>
</tr>
<tr>
<td style="text-align: center">etc</td>
<td style="text-align: left">存放了系统管理时要用到的各种配置文件和子目录</td>
</tr>
<tr>
<td style="text-align: center">home</td>
<td style="text-align: left">用来存放用户的主目录，除root超级管理员家目录不在此</td>
</tr>
<tr>
<td style="text-align: center">mnt</td>
<td style="text-align: left">一般是用于存放挂载储存设备的挂载目录</td>
</tr>
<tr>
<td style="text-align: center">root</td>
<td style="text-align: left">超级权限用户root的家目录</td>
</tr>
<tr>
<td style="text-align: center">tmp</td>
<td style="text-align: left">临时文件目录,重要的文件或目录不能存放在此</td>
</tr>
<tr>
<td style="text-align: center">usr</td>
<td style="text-align: left">存放了用户安装的软件，占用硬盘空间最大的目录</td>
</tr>
<tr>
<td style="text-align: center">var</td>
<td style="text-align: left">存放内容经常变动的目录 如日志文件</td>
</tr>
</tbody>
</table>
<h3 id="基本命令">基本命令</h3>
<p>可以看这篇文章:开发常用命令</p>
<table>
<thead>
<tr>
<th style="text-align: center">名称</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">cd 路径</td>
<td>进入指定路径</td>
</tr>
<tr>
<td style="text-align: center">cd ..</td>
<td>回到上一级</td>
</tr>
<tr>
<td style="text-align: center">ls</td>
<td>查看目录的文件或目录列表</td>
</tr>
<tr>
<td style="text-align: center">ls -d</td>
<td>查看目录信息</td>
</tr>
<tr>
<td style="text-align: center">ls -l</td>
<td>列表形式</td>
</tr>
<tr>
<td style="text-align: center">ls -h</td>
<td>文件大小会自己计算(k/m/g)</td>
</tr>
<tr>
<td style="text-align: center">cat 路径</td>
<td>查看文件内容</td>
</tr>
<tr>
<td style="text-align: center">tail -f 路径</td>
<td>实时查看文件最新更改内容</td>
</tr>
<tr>
<td style="text-align: center">head -n 路径</td>
<td>n数字 查看当前文件最顶部几行</td>
</tr>
<tr>
<td style="text-align: center">unzip dist.zip</td>
<td>解压dist.zip文件</td>
</tr>
</tbody>
</table>
<h3 id="软件安装">软件安装</h3>
<p>linux也是需要安装软件(服务也是软件) ,如要安装nginx，linux开源操作系统。软件与软件之前要有依赖关系。</p>
<ol>
<li>源码安装在软件官方去下载好 源码(c c++)进行编译安装   需要手动解决依赖</li>
<li>rpm安装rpm类似于windows安装包，使用它来安装也需要手动解决依赖</li>
<li>yum安装类似于npm，自动解决安装时所需的依赖</li>
</ol>
<blockquote>
<p>注：yum需源站，源站都在国外，所以使用yum进行软件安装，需要切换镜像源。现在所有的云主机都已经帮你完成了。</p>
</blockquote>
<h2 id="linux-系统启动">Linux 系统启动</h2>
<h3 id="启动过程">启动过程</h3>
<p>Linux系统的启动过程并不是大家想象中的那么复杂，其过程可以分为5个阶段</p>
<ol>
<li>内核的引导</li>
<li>运行init</li>
<li>系统初始化</li>
<li>建立终端</li>
<li>用户登录系统</li>
</ol>
<h3 id="运行级别">运行级别</h3>
<blockquote>
<p>注意:在云服务器中，不要去设置它的运行级别。</p>
</blockquote>
<p>Linux允许为不同的场合，分配不同的开机启动程序，这就叫做"运行级别"（runlevel）。也就是说，启动时根据"运行级别"，确定要运行哪些程序。</p>
<ul>
<li>Linux系统有7个运行级别(runlevel)：</li>
</ul>
<ol>
<li>运行级别0：系统停机状态，系统默认运行级别不能设为0，否则不能正常启动 关机</li>
<li>运行级别1：单用户工作状态，root权限，用于系统维护，禁止远程登陆</li>
<li>运行级别2：多用户状态(没有NFS)</li>
<li>运行级别3：完全的多用户状态(有NFS)，登陆后进入控制台命令行模式命令行模式</li>
<li>运行级别4：系统未使用，保留</li>
<li>运行级别5：X11控制台，登陆后进入图形GUI模式   图形模式，多用户也是有命令</li>
<li>运行级别6：系统正常关闭并重启，默认运行级别不能设为6，否则不能正常启动重启</li>
</ol>
<ul>
<li>在centos7之后对运行级别进行了稍微的修改<br>
init级别        systemctl target
<ul>
<li>0:shutdown.target</li>
<li>1:emergency.target</li>
<li>2:rescure.target</li>
<li>3:multi-user.target</li>
<li>4:无</li>
<li>5:graphical.target</li>
<li>6:无</li>
</ul>
</li>
<li>查看默认运行级别的方式为
<blockquote>
<p>runlevel<br>
systemctl get-default</p>
</blockquote>
</li>
<li>设置默认运行级别的方式
<blockquote>
<p>init 3</p>
</blockquote>
</li>
<li>设置成多用户命令模式
<blockquote>
<p>systemctl set-default multi-user.target</p>
</blockquote>
</li>
<li>关机
<blockquote>
<p>init 0</p>
</blockquote>
</li>
<li>重启
<blockquote>
<p>init 6</p>
</blockquote>
</li>
</ul>
<p>rm -rf /usr/share/man/man8/nginx.8.gz</p>
<h2 id="nginx详解">Nginx详解</h2>
<p>ginx是开源免费的一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，使用nginx网站用户有很多，如百度、京东、新浪、网易、腾讯、淘宝等<br>
官网<br>
中文文档</p>
<h3 id="1安装">1、安装</h3>
<p>在安装nginx前首先查看一下linux服务器版本</p>
<blockquote>
<p>cat /etc/redhat-release</p>
</blockquote>
<p>这里我的linux是8.1版本的（CentOs 8.x）</p>
<h4 id="方式一yum安装">方式一：yum安装</h4>
<ul>
<li>默认端口号为80</li>
<li>默认配置文件名称nginx.conf</li>
<li>nginx默认web路径中 /usr/share/nginx/html(存放我们的前端项目)</li>
</ul>
<ol>
<li>
<p>安装：</p>
<blockquote>
<p>yum install nginx</p>
</blockquote>
</li>
<li>
<p>启用并启动Nginx服务</p>
<blockquote>
<p>sudo systemctl enable nginx<br>
sudo systemctl start nginx</p>
</blockquote>
<p>当然nginx默认会被安装到/usr/sbin/nginx下因此可以直接执行如下命令启动</p>
<blockquote>
<p>/usr/sbin/nginx</p>
</blockquote>
</li>
<li>
<p>要验证服务是否正在运行，检查其状态</p>
<blockquote>
<p>sudo systemctl status nginx</p>
</blockquote>
</li>
<li>
<p>查看当前服务器中运行端口</p>
<blockquote>
<p>netstat -tunpl</p>
</blockquote>
<p>-tunpl解释：</p>
<ul>
<li>t： tcp</li>
<li>u： udp</li>
<li>n： 显示端口应用名称</li>
<li>p： pid</li>
<li>l： 只查看正在运行</li>
</ul>
</li>
<li>
<p>扩展方法</p>
<ul>
<li>停止服务器
<blockquote>
<p>方法一： sudo systemctl stop nginx<br>
方法二：/usr/sbin/nginx -s stop<br>
方法三： 杀死进程 pkill nginx</p>
</blockquote>
</li>
<li>重启
<blockquote>
<p>/usr/sbin/nginx -s reload   不会让服务器停止，只会重新加载nginx配置让配置生效平滑重启<br>
/usr/sbin/nginx -s restart先停止服务，再重启服务</p>
</blockquote>
</li>
</ul>
</li>
</ol>
<h4 id="方式二自定义目录安装">方式二：自定义目录安装</h4>
<ol>
<li>
<p>安装工具和库<br>
依赖软件一定要安装，否则后面的nginx将无法正常安装成功。</p>
<blockquote>
<p>yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel pcre pcre-devel</p>
</blockquote>
<p>解释：</p>
<ul>
<li>PCRE是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式</li>
<li>zlib库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip</li>
</ul>
</li>
<li>
<p>创建一个文件夹</p>
<blockquote>
<p>cd /usr/local<br>
mkdir nginx<br>
cd nginx</p>
</blockquote>
</li>
<li>
<p>下载tar包</p>
<blockquote>
<p>wget http://nginx.org/download/nginx-1.19.0.tar.gz<br>
tar -xvf nginx-1.19.0.tar.gz</p>
</blockquote>
</li>
<li>
<p>安装nginx</p>
<blockquote>
<p>进入目录：cd nginx-1.19.0<br>
执行命令：./configure<br>
执行make命令： make<br>
执行make install命令：make install</p>
</blockquote>
</li>
<li>
<p>检查安装<br>
cd到刚才配置的安装目录</p>
<blockquote>
<p>cd /usr/loca/nginx/<br>
./sbin/nginx -t</p>
</blockquote>
<p>正常情况的信息输出：</p>
<pre><code>nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
</code></pre>
</li>
</ol>
<h3 id="2启动nginx">2、启动nginx</h3>
<ul>
<li>
<p>启动 nginx 服务</p>
<blockquote>
<p>/usr/local/nginx/sbin/nginx</p>
</blockquote>
<p>注：启动时一定要确保80端口没有被占用</p>
<blockquote>
<p>netstat -tunpl</p>
</blockquote>
<p>其他：</p>
<blockquote>
<p>/usr/local/nginx/sbin/nginx -s reload            # 重新载入配置文件<br>
/usr/local/nginx/sbin/nginx -s stop            # 停止 Nginx<br>
/usr/local/nginx/sbin/nginx -t                  # 检查配置文件书写是否正确</p>
</blockquote>
</li>
</ul>
<h3 id="3解决80端口被占用">3、解决80端口被占用</h3>
<pre><code>解决Nginx启动报nginx: bind() to 0.0.0.0:80 failed (98: Address already in use)
</code></pre>
<ol>
<li>
<p>出现这种情况一般是80端口被占用，使用sudo fuser -k 80/tcp 命令关闭80端口即可</p>
<blockquote>
<p>sudo fuser -k 80/tcp</p>
</blockquote>
</li>
<li>
<p>如果没有成功可以先关闭一下防火墙再关闭80端口试一下</p>
<blockquote>
<p>使用命令：systemctl status firewalld.service 查看防火墙状态<br>
使用命令：systemctl stop firewalld.service 关闭运行的防火墙</p>
</blockquote>
</li>
</ol>
<h3 id="4彻底卸载和删除centos上的nginx">4、彻底卸载和删除CentOS上的Nginx</h3>
<ol>
<li>首先查看是否在运行nginx
<blockquote>
<p>ps -ef | grep nginx</p>
</blockquote>
</li>
<li>如果在运行先停止nginx
<blockquote>
<p>/usr/local/nginx/sbin/nginx -s stop</p>
</blockquote>
</li>
<li>查看nginx安装目录
<blockquote>
<p>whereis nginx</p>
</blockquote>
</li>
<li>删除相关文件
<blockquote>
<p>rm -rf /usr/sbin/nginx<br>
rm -rf /etc/nginx<br>
rm -rf /etc/init.d/nginx</p>
</blockquote>
</li>
<li>使用yum卸载 nginx及相关依赖
<blockquote>
<p>yum remove nginx</p>
</blockquote>
</li>
<li>检查是否还有残余文件，有的话执行步骤3继续删除
<blockquote>
<p>whereis nginx</p>
</blockquote>
</li>
</ol>
<h3 id="目录介绍">目录介绍</h3>
<p>安装成功后，进入到安装后的目录中<br>
cd /usr/local/nginx, 看到如下4个主要目录</p>
<ul>
<li>conf：配置文件   配置虚拟主机文件就在此</li>
<li>html：nginx默认web根路径位置</li>
<li>logs：日志文件</li>
<li>sbin：二进制程序启动/停止/重载服务命令就在此</li>
</ul>
<h3 id="配置-nginxconf">配置 nginx.conf</h3>
<h4 id="配置文件语法">配置文件语法</h4>
<p>http段 =&gt; server段 =&gt; location段</p>
<ul>
<li>http段：    是要包含所有的Server段，即将nginx所有的虚拟主机配置包含进去</li>
<li>server段：一个server即一个虚拟主机配置段落，后期有多少个虚拟主机取决于server段</li>
<li>location段：每个location段即表示该虚拟主机中的一个模块功能配置域名后台的地址</li>
<li>注：
<ul>
<li>配置后面分号不能少，{} 和配置之间要有空格</li>
<li>nginx配置文件中每一行的结束都要写上 分号 ;</li>
</ul>
</li>
</ul>
<pre><code>http{
    server{
      location /a {
            root /a
      }
      location /b {
            alias /a
         }
    }
}
</code></pre>
<h4 id="配置虚拟主机">配置虚拟主机</h4>
<p>一台服务器上面，有时候会绑定多个不同的域名，这时就需要我们来配置nginx让其支持多域名的虚拟主机(或多端口web服务器)。<br>
步骤：</p>
<ol>
<li>在nginx配置文件中新增一个server节点</li>
<li>在server节点中，修改对应的站点目录</li>
<li>重载nginx服务 nginx -s reload</li>
</ol>
<pre><code>server {
        listen 80; # 端口
        server_name www.aa.com; # 域名
        root /web/www.aa.com; # 网站目录路径
        index index.html;   # 默认缺省文件
        charset utf-8;
         access_loglogs/ www.aa.com.access.logmain;
         error_page404 403 500 502 503 504/50x.html;
}
</code></pre>
<h4 id="开启gzip">开启gzip</h4>
<p>压缩文件大小变小了，传输更快了，提高网站的访问速度和并发量。目前市场上浏览器都是支持GZIP的。IE6以下支持不好，会出现乱码情况。<br>
操作步骤：</p>
<ol>
<li>修改配置，开启gzip压缩</li>
<li>重载nginx配置</li>
<li>测试是否有压缩</li>
</ol>
<pre><code>## http 节点中设置

# 开启gzip
gzip            on;
# 设置将被gzip压缩的响应的最小长度
gzip_min_length 200;
# 压缩级别 1-9
gzip_comp_level 6;
# 压缩在缓冲区块数和每块大小
gzip_buffers 32 4k;   # | 16 8k;
# 设置压缩响应所需的最低HTTP请求版本
gzip_http_version 1.0;
gzip_types text/plain text/css text/xml application/xml application/json application/javascript;
</code></pre>
<h2 id="动手发布一个自己的项目到服务器上">动手发布一个自己的项目到服务器上</h2>
<h3 id="一购买一个阿里云服务器">一、购买一个阿里云服务器</h3>
<p>这里在上面购买已经提到过了需要注意以下几点</p>
<ol>
<li>记录自己的：公网ip</li>
<li>操作--&gt;更多--&gt;密码/秘钥--&gt;重置实例密码</li>
<li>操作--&gt;更多--&gt;网络和安全组-&gt;安全组配置<br>
进入后，查看规则列表中，有没有80端口，如果没有则需要添加一条规则<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210909152824143-1341090377.png" alt="" loading="lazy"></li>
</ol>
<h3 id="二putty-登陆服务器">二、putty 登陆服务器</h3>
<ol>
<li>打开putty输入：host Name（公网ip）、port（默认22就行）点击确认即可<br>
点击连接，第1次会看到提示，选择 是 就可以</li>
<li>进去会让你输入login as：一般输入root即可</li>
<li>password：你设置的密码（linux中对于密码是隐式显示，输入后在终端中看不到字符）</li>
</ol>
<h3 id="三服务器上安装nginx">三、服务器上安装nginx</h3>
<ol>
<li>上面已经有安装方法，按照步骤安装完成即可</li>
<li>直接通过域名或ip地址访问nginx服务器（不同版本的nginx展示不一样）</li>
<li>nginx下的html文件存放的就是我们前端要打包部署的文件</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210909152655172-1496865794.png" alt="" loading="lazy"></p>
<h3 id="四上传项目">四、上传项目</h3>
<p>这里我们使用fileZlia可视化工具来辅助完成刚上传工作</p>
<ol>
<li>打开 fileZlia 工具连接linux服务器</li>
<li>进去到/usr/local/nginx/sbin/nginx/html目录下，</li>
<li>将我们vue项目打包好的dist存放到这里</li>
<li>这里如果dist过大会很慢，我们可以放入一个dist.zip文件</li>
<li>解压dist.zip<br>
进去终端执行
<blockquote>
<p>cd /usr/local/nginx/sbin/nginx/html<br>
unzip dist.zip 解压</p>
</blockquote>
</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210909152603637-574737398.png" alt="" loading="lazy"></p>
<h3 id="五配置niginx的nginxconf">五、配置niginx的nginx.conf</h3>
<p>进去到/usr/local/nginx/sbin/nginx/conf目录下，找到nginx.conf<br>
配置 server项</p>
<pre><code>   location / {
            root   html/dist;
            indexindex.html index.htm;
      }
</code></pre><br><br>
来源：https://www.cnblogs.com/ypSharing/p/LinuxHandler.html
頁: [1]
查看完整版本: 前端搭建Linux云服务器，Nginx配置详解及部署自己项目到服务器上