Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目
上一篇:Ubuntu 下部署 SpringBoot
第一步: Ubuntu 上安装 nodejs
执行
apt install nodejs
命令安装 nodejs。- 过程之前的文章已经有很多例子了,不再多说,期间会有一次确认占用磁盘空间的提示,输入
Y
继续即可。
- 过程之前的文章已经有很多例子了,不再多说,期间会有一次确认占用磁盘空间的提示,输入
▲ 执行
apt install nodejs-legacy
命令安装依赖包,这个包下拥有node
命令- 这个命令之所以标记出来,是因为在以前的版本,这个包是必须安装的
- 但是,由于这次安装,
node
选择了最新版本,执行这个命令时,出现如下提示:root@iZwz92d94t8mb03s9z327hZ:~# apt install nodejs-legacyReading package lists... DoneBuilding dependency treeReading state information... DonePackage nodejs-legacy is not available, but is referred to by another package.This may mean that the package is missing, has been obsoleted, oris only available from another sourceHowever the following packages replace it:nodejs libnode64E: Package 'nodejs-legacy' has no installation candidate
关键信息:包丢失了、被另一个包引用、以下包替换了它
- 也就是说,
nodejs
的libnode64
包替换了这个包 - 如果不放心,那么再执行一下
apt install libnode64
命令root@iZwz92d94t8mb03s9z327hZ:~# apt install libnode64Reading package lists... DoneBuilding dependency treeReading state information... Donelibnode64 is already the newest version (10.19.0~dfsg-3ubuntu1).libnode64 set to manually installed.0 upgraded, 0 newly installed, 0 to remove and 7 not upgraded.
关键信息:已经是最新版本。
尝试
node
命令root@iZwz92d94t8mb03s9z327hZ:~# node >
进入了
node
命令窗,可以使用。继续,执行
apt install npm
命令。npm 就是 node 的一个包管理器。root@iZwz92d94t8mb03s9z327hZ:~# apt install npm Reading package lists... Done Building dependency tree Reading state information... Done The following additional packages will be installed: ...
执行
npm config list
查看 npm 配置(确认是否安装成功)root@iZwz92d94t8mb03s9z327hZ:~# npm config list ; cli configs metrics-registry = "https://registry.npmjs.org/" scope = "" user-agent = "npm/6.14.4 node/v10.19.0 linux x64"; builtin config undefined globalconfig = "/etc/npmrc" globalignorefile = "/etc/npmignore" prefix = "/usr/local"; node bin location = /usr/bin/node ; cwd = /root ; HOME = /root ; "npm config ls -l" to show all defaults.
第二步: Ubuntu 上安装 Nginx
执行
apt install nginx
安装 Nginx- 看到有人不知道为什么装
nginx
,在这里简单说明一下,nginx
在这里扮演的角色和apache
、tomcat
是类似的,就是一个容器,至于具体的原理有什么异同?反向代理是什么?有什么优势?自行百度吧,我也还在了解中…
- 看到有人不知道为什么装
访问远程服务器的
80
端口(查看是否安装成功)【nginx 的默认端口是 80】我自己的远程服务器地址就暂时打码了(后面的文章可能会公开),因为新服务器从0开始配置,很多都是默认信息,怕你们偷偷改我数据。
这个界面就是 Nignx 的默认首页
第三步: 本机(前端代码所在的机器)打包,上传打包文件到 Ubuntu 服务器
vue
项目的创建单独有教程,也不是本文的重点。这里,就直接以著名的vue
管理框架vue-element-admin
为例。 点击跳转GitHub。clone
到本地机器(本地机器记得安装node
、npm
,并配置环境)打开根目录下
package.json
文件,大概第 6 行的位置,会看到一个scripts
属性... "scripts": {"dev": "vue-cli-service serve","lint": "eslint --ext .js,.vue src","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","new": "plop","svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml","test:unit": "jest --clearCache && vue-cli-service test:unit","test:ci": "npm run lint && npm run test:unit" }, ...
这里面,包含了一些自定义脚本,冒号左边是脚本名称,右边是实际会执行的脚本。
现在需要打包到服务器,所以,应该执行
npm run build:prod
命令(npm run
后面跟脚本名称,不同项目脚本名称配置不同,看清楚了再运行)PS D:\xxxxx\vue-element-admin-master> npm run build:prod > vue-element-admin@4.4.0 build:prod D:\xxxxx\vue-element-admin-master > vue-cli-service build/ Building for production...
耐心等待 …
DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
出现
DONE Build complete
就成功了,这是,项目目录下会生成一个dist
文件
★ 实际情况中,如果之前没有开发过
vue
项目,可能并不会这么顺利,一个新的vue
项目下载下来,安装完node
之后,可能还会遇到各种各样的 “找不到包”、“网络连接超时” 等等的报错。这些类似的报错网上通常都会有很多解决方案,这里不详细说,
提醒一下:
1. “网络连接失败” 之类的错误,一般是因为国外的镜像源被拦截或者网速太慢导致,可以切换国内镜像源;
2. “包安装失败”或者“找不到”之类的错误,因为某些包依赖于其他环境,比如 sass 依赖 python 之类的(这个记不太清,不确定,但确实有这种可能),所以复制基本的报错信息,然后去网上搜一下就有对应解决方案了。在 Ubuntu 上新建一个目录,上传
dist
目录下的文件新建文件
mkdir 文件名
命令上传完成后
root@iZwz92d94t8mb03s9z327hZ:/opt/web/demo# ll total 92 drwxr-xr-x 3 root root 4096 Jul 17 15:48 ./ drwxr-xr-x 3 root root 4096 Jul 17 15:47 ../ -rw-r--r-- 1 root root 67646 Jul 17 15:48 favicon.ico -rw-r--r-- 1 root root 9127 Jul 17 15:48 index.html drwxr-xr-x 6 root root 4096 Jul 17 15:48 static/
第四步: Ubuntu 上修改 Nginx 配置文件,指向 web 项目
执行
cd /etc/nginx/sites-enabled
进入Nginx
配置文件目录Nginx
的默认主配置文件在/etc/nginx/nginx.conf
文件- 打开
nginx.conf
文件后,在http
配置中可以看到两行语句include /etc/nginx/conf.d/*.conf; # 引入 conf.d 目录下所有 .conf 后缀的文件include /etc/nginx/sites-enabled/*; # 引入 sites-enable 目录下的所有文件
执行
cat default
查看配置文件# Default server configuration # server {listen 80 default_server;listen [::]:80 default_server;# SSL configuration## listen 443 ssl default_server;# listen [::]:443 ssl default_server;## Note: You should disable gzip for SSL traffic.# See: https://bugs.debian.org/773332## Read up on ssl_ciphers to ensure a secure configuration.# See: https://bugs.debian.org/765782## Self signed certs generated by the ssl-cert package# Don't use them in a production server!## include snippets/snakeoil.conf;root /var/www/html;# Add index.php to the list if you are using PHPindex index.html index.htm index.nginx-debian.html;server_name _;location / {# First attempt to serve request as file, then# as directory, then fall back to displaying a 404.try_files $uri $uri/ =404;}# pass PHP scripts to FastCGI server##location ~ \.php$ {# include snippets/fastcgi-php.conf;## # With php-fpm (or other unix sockets):# fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;# # With php-cgi (or other tcp sockets):# fastcgi_pass 127.0.0.1:9000;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {# deny all;#} }# Virtual Host configuration for example.com # # You can move that to a different file under sites-available/ and symlink that # to sites-enabled/ to enable it. # #server {# listen 80; # listen [::]:80; # # server_name example.com; # # root /var/www/example.com; # index index.html; # # location / {# try_files $uri $uri/ =404; # } #}
注释写的非常详细。上面的是
default server configuration
默认配置,其中很多一些非必须的配置都是被注释掉的,暂时可以不必关心,主要关注几个配置:listen 80
:监听 80 端口,也就是 web 的默认端口,可以省略default server
:默认服务。配置文件是可以存在多个server
的,自上而下匹配,如果不显式指定default server
,第一个服务就是默认服务root /var/www/html
:默认的根目录路径(建议根据实际情况修改为自己项目包的路径)- 在
location
里面也可以配置root
根目录,优先于server
中的root
匹配
- 在
index index.html index.htm index.nginx-debian.html
:这是一些默认的首页名称,Nginx
会逐个去查找。这次部署的这个 vue 项目的首页是index.html
,已经存在了,所以不需要修改,如果部署php
项目,就需要添加上index.php
或者自定义的首页(login.html
之类的)server_name _
:就是一个虚拟主机名称,支持正则表达式。默认的_
代表无效名称,暂时不需要更改。
执行
vim default
修改配置文件修改
root /var/www/html;
为root /opt/web/demo
(就是第三步最后一小步中的目录)
第五步: 重启 Nginx 服务器
执行
service nginx restart
重启 Nginx 服务器
附:顺手将 SpringBoot
也部署在了 Nginx
下
停止
java
程序- 执行
netstat -anp | grep 8080
获取 8080 端口的 PID 号、kill -9 PID
杀死程序
- 执行
停止
tomcat
服务cd /usr/local/apache-tomcat-8.5.69/bin/
进入tomcat
安装路径(路径依照自己安装路径修改)./shutdown.sh
终止tomcat
服务(不是必须的,但是tomcat
会占用 8080 端口)cd /etc/nginx/sites-available/
进入nginx
安装路径vim default
修改default
配置文件(大概差不多就可以,listen
和root
是最主要的)server{ listen 8080; root /opt/server/yuki; # java 包运行的路径 index index.html index.htm index.nginx-debian.html; server_name _; location / {try_files $uri $uri/ =404; }
}
```- 进入
java
包所在路径,启动java
包(这一步没有顺序,可以先启动后配置 Nginx 也行)nohup java -jar demo.jar &
(其中demo.jar
就是java
包)
Ubuntu 下搭建 Nginx 部署 vue 项目相关推荐
- VUE项目学习(三):win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
- nginx部署vue项目,给访问路径加前缀
Nginx安装与启动 去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
- Nginx部署Vue项目动态路由刷新404
目录 前言 第一次 第二次 前言 记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
- Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
- 服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目 首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
- Ubuntu安装Nginx部署vue项目
官网下载Nginx压缩包 Nginx下载 上传到Linux或直接在Linux上下载压缩包. # 解压 tar -zxvf ... ubuntu下安装nginx时依赖库zlib,pcre,openssl ...
- nginx 部署vue项目
首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server ngi ...
- Docker + Nginx 部署Vue项目
1.vue项目打包 打包生成dist文件夹 npm run build 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. assetsPublicPath: '/' 记得 ...
- 使用Docker Nginx部署vue项目
Vue3 项目打包 打包 Vue 项目在根目录使用以下命令: npm run build 执行以上命令,输出结果如下: 执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 in ...
最新文章
- memcpy 头文件_C|memcpy()和memmove()的比较及实现
- 《企业的边界》的书摘
- 34 SD配置-销售凭证设置-定义销售凭证类型
- error: (-215:Assertion failed) !ssize.empty() in function 'cv::resize'产生原因
- Android(java)学习笔记155:中文乱码的问题处理(qq登录案例)
- ubuntu安装ElasticSearch-head插件
- 算法笔记--无向图的桥、割点、边双连通分量和点双连通分量
- git使用puttygen生成公钥私钥
- 2021.4.18高一模拟赛
- 紫色飞猪:基于K8s的集群稳定架构
- shell中变量截取
- vue 登陆成功后携带不了后台传来的 set-cookie 并携带请求错误处理
- 华南农业大学C语言程序设计(实验六)
- java中解决脏读_JAVA数据脏读
- Linux alarm闹钟函数
- 华为电脑linux怎么切换输入法,华为平板键盘怎么切换中文输入法
- 打印机只能扫描图片,不能扫描成PDF解决办法
- 开源之夏来啦,欢迎报名 Apache APISIX 项目!
- Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单
- 10060 mysql_连接MySQL错误:Can't connect to MySQL server (10060)
热门文章
- element 表格 最后一行合计。 合并单元格方法
- 学UI设计费用要多少?
- O2OA后端代码调试
- column “name” not found 错误
- DHCP欺骗泛洪攻击、如何防御DHCP欺骗攻击——DHCP snooping技术、DHCP snooping配置命令
- 深度学习模型压缩方法(1)-----综述
- zzulioj 1143: 最大值—多种进制
- 详解网商银行“三地五中心”数据部署架构
- matlab stepwise 用法,stepwise函数使用问题
- 旧版本pytorch安装教程