关于linux:Linux安装nginx及部署Vue项目

部署环境：Ubuntu 20.04 LTS
本地环境：Windows 10

一、下载 nginx

应用的版本是：nginx-1.19.4.tar.gz
官网地址：http://nginx.org/en/download.html
百度网盘：
链接: https://pan.baidu.com/s/1RNdH… 提取码: 7349

二、装置 nginx

1. 连贯服务器

能够应用 xshell 工具连贯服务器，或者某个命令行工具都行（gitbash，cmd …）。应用命令行工具执行以下命令连贯服务器，root 是用户名，8.129.38.87 是你的服务器公网 IP，而后输出明码即可。

ssh root@8.129.38.87 -p 22

2. 配置 nginx 装置所需的环境

装置两个依赖库

sudo apt-get install autoconf automake
sudo apt-get install libpcre3 libpcre3-dev

装置 zlib 库

sudo apt-get install openssl
sudo apt-get install libssl-dev

3. 将 nginx 压缩包上传到服务器并解压

在本地关上刚刚下载好的 nginx 压缩包所在目录，关上命令窗口，应用 scp 命令上传资源，我这里上传到服务器的 /usr/local 目录下，这里会让你输出服务器登录明码

scp ./nginx-1.19.4.tar.gz root@8.129.38.87:/usr/local

切换到服务器命令窗口，能够看到刚刚上传的压缩包，执行解压命令解压安装包

cd /usr/local
tar -zxvf nginx-1.19.4.tar.gz

4. 执行默认配置

解压之后，进入解压后的文件夹，执行 cd nginx-1.19.4
而后进行配置，举荐应用默认配置，间接执行 ./configure 就好了，如下图所示：

5. 编译装置 nginx

在当前目录 /usr/local/nginx-1.19.4 进行编译。输出 make 按回车即可。如果编译出错，请查看是否后面的 4 个装置都没有问题。

cd /usr/local/nginx-1.19.4
make

编译胜利之后，就能够装置了，输出以下命令：

make install

6. 启动 nginx

进入 /usr/local/nginx/sbin 目录，输出 ./nginx 即可启动 nginx

cd /usr/local/nginx/sbin
./nginx

如果启动报错：nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，阐明 80 端口被占用，应用如下命令：

fuser -k 80/tcp

敞开 nginx

cd /usr/local/nginx/sbin
./nginx -s quit
# 或者 ./nginx -s stop

重启 nginx

cd /usr/local/nginx/sbin
./nginx -s reload

查看 nginx 过程

ps aux|grep nginx

7. 设置 nginx 开机启动

在 rc.local 减少启动代码即可

vim /etc/rc.local
# 编辑文件，在文件底部减少 /usr/local/nginx/sbin/nginx 这行内容保留退出

三、部署 Vue.js 我的项目

1. 关上 vue 我的项目，执行打包

npm run build

完结后进入 dist 文件夹，将所有打包后果选中，打包压缩成 dist.zip

2. 将打包后果压缩包上传到服务器

scp ./dist.zip root@8.129.38.87:/usr/local/nginx/html

3. 解压缩服务器上的 dist.zip 压缩包

解压之前，先将 /usr/local/nginx/html 目录下的 index.html 删除掉

cd /usr/local/nginx/html
rm -rf index.html
unzip dist.zip

执行之后如图

4. 批改 nginx 配置文件

进入 cd /usr/local/nginx/conf 目录可批改 nginx 的配置文件：

cd /usr/local/nginx/conf
vim nginx.conf

按键盘 i 进行编辑，编辑实现按 Esc 退出编辑，再输出 :wq 保留并退出

贴上一个完整版的，其中有序号表明的是正文阐明，次要更改了 server 的内容

nginx.conf

 
#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
events {worker_connections  1024;}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local]"$request" '
    #                  '$status $body_bytes_sent"$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    server {
        # 1. 监听 2001 端口
        listen       2001;
        
        # 2. 这是你部署的 IP，你服务器的公网 IP
        server_name  8.129.38.87;
 
        # 3. 这里配置前端打包文件的映射门路
        root /usr/local/nginx/html;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
 
        # 4. 解决跨域问题，将须要代理的后端地址写在 proxy_pass 前面
        # 将所有的 http://8.129.38.87:2001/front 申请，转发到 http://edufront.lagou.com/front
        location /front {proxy_pass  http://edufront.lagou.com;}
        
        # 5. 同理，可配置多个 location，对于 nginx 代理的相干配置请自行网上查找
        location /boss {
            proxy_pass  http://eduboss.lagou.com;
            # proxy_redirect off;
            # proxy_set_header Host $host;
            # proxy_set_header X-Real-IP $remote_addr;
            # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
 
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {root   html;}
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
 
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
 
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
 
 
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
 
 
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
 
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
 
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
 
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
 
}

另外，如果须要配置多个 vue 我的项目，只需增加多个 server 配置即可。
把 nginx 上面的另外一个 server 的正文勾销，再进行批改配置即可：

5、在服务器治理台凋谢 2001 端口

2001 端口为咱们刚刚在 nginx.conf 配置文件中监听的端口
登录云服务器治理台，增加平安组规定

6. 重启 nginx

进入 /usr/local/nginx/sbin/ 目录，执行重启命令，让配置失效：

cd /usr/local/nginx/sbin/
./nginx -s reload

查看 nginx 过程：

ps aux|grep nginx

7. 拜访你的网站

在浏览器输出网址 http://8.129.38.87:2001/ 拜访你的网站，这是我的服务器 IP 加上刚刚配置的端口，记得批改成你本人的哟~