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

SegmentFault博客
我还没有学会写个人说明!
上一篇

Dbrand公布PS5定制面板 公然挑战索尼起诉

下一篇

塌鼻子or高鼻梁,怎么让基因发挥最大变美潜力?

你也可能喜欢

评论已经被关闭。

插入图片