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项目，执行打包

贴一下我的vue项目地址：https://github.com/luxiancan/...

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加上刚刚配置的端口，记得修改成你自己的哟~